如何在 Bootstrap4 表体中设置滚动 - CSS

在 Bootstrap4 中，表格是非常常见的元素。当数据行比较多时，表格就会越来越长，此时如果不进行滚动设置，页面就会变得不太友好，用户需要不断地翻页才能看到所有数据。因此，在这种情况下，设置表格的滚动显得尤为重要。

设置表头固定

在表格中，首先我们需要把表头固定，这样在滚动时才不会出现表头消失的情况。我们可以通过 CSS 来实现：

.table thead th {
  position: sticky;
  top: 0;
  background: #fff;
}

这段 CSS 会将表头设置为固定在顶部，背景设为白色（当然，根据实际情况可以自行修改）。这样设置后，当我们在滚动表格时，表头就会一直固定在最上方，不会消失。

设置表体滚动

接下来，我们需要将表体设置成滚动状态。同样地，我们可以通过 CSS 来实现：

.table tbody{
  display: block;
  overflow-y: scroll;
  height: 400px; /*设置表体高度*/
  width: 100%; /*设置表体宽度*/
}

这段 CSS 的作用是将 tbody 转换为块级元素，并设置成滚动状态。height 可以根据实际情况进行调整，width 等于 100% 表示与表格本身的宽度一致。

完整代码

<table class="table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>地址</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>22</td>
      <td>上海</td>
    </tr>
    ...
  </tbody>
</table>

<style>
  /*表头固定*/
  .table thead th {
    position: sticky;
    top: 0;
    background: #fff;
  }

  /*表体滚动*/
  .table tbody{
    display: block;
    overflow-y: scroll;
    height: 400px; /*设置表体高度*/
    width: 100%; /*设置表体宽度*/
  }
</style>

这样，我们就完成了表格的滚动设置。在实际开发中，如果需要自定义滚动条的话，也可以通过 CSS 实现，这里就不赘述了。