CSS 如何使用溢出滚动设置tbody的高度

在本文中，我们将介绍如何使用CSS来设置tbody元素的高度，并且当内容超过指定高度时，添加垂直滚动条。

阅读更多：CSS 教程

使用overflow和height属性设置tbody的高度

要设置tbody的高度并添加垂直滚动条，我们可以使用CSS的overflow和height属性。首先，我们需要将包裹tbody的父元素设置为具有固定高度且具有垂直滚动条的容器。然后，我们将tbody的高度设置为小于父元素高度的值，并将overflow属性设置为”auto”或”scroll”。

下面是一个示例代码：

<style>
.table-container {
  height: 200px;
  overflow-y: scroll;
}

table {
  width: 100%;
  border-collapse: collapse;
}

tbody {
  height: 150px;
  overflow-y: auto;
}
</style>

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>25</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>30</td>
      </tr>
      <!-- 这里可以添加更多的数据行 -->
    </tbody>
  </table>
</div>

在上面的示例中，我们将.table-container的高度设置为200px，并且通过设置overflow-y属性为scroll来添加垂直滚动条。然后，我们将tbody的高度设置为150px，并通过设置overflow-y属性为auto来实现内容超过指定高度时的滚动效果。

适用于tbody内容动态变化的情况

上面的示例适用于tbody的内容是静态的情况，但如果tbody的内容是动态变化的，我们需要注意一些细节。当内容超过指定高度时，垂直滚动条会出现，而这可能会导致表格的布局变化。为了避免这种情况，我们可以使用CSS的calc函数来动态计算tbody的高度。

下面是一个示例代码：

<style>
.table-container {
  height: 200px;
  overflow-y: scroll;
}

table {
  width: 100%;
  border-collapse: collapse;
}

tbody {
  height: calc(100% - 30px); /* 通过计算动态设置tbody的高度 */
  overflow-y: auto;
}
</style>

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <!-- 这里的数据行是动态生成的 -->
    </tbody>
  </table>
</div>

在上面的示例中，我们使用了calc函数来计算tbody的高度。通过将100%减去30px（这里的30px是表头的高度），我们可以获得正确的动态高度。这样，当tbody的内容动态变化时，垂直滚动条会根据内容的高度而出现或消失，从而保持表格布局的稳定性。