优化体验！教你一步设置 tbody 滚动条

2023-10-03 22:20:37

想要给 tbody 一个超出的滚动条，其实只需要给 tbody 设置一个固定高度，以及 overflow: auto（即超出添加滚动条）。但是，table 固有的 display: table 属性会让 tbody 继承 display: table-row-group，因此无法设置高度。

为了解决这个问题，可以使用 display: block 将 tbody 设置为块级元素，这样就可以给它设置高度了。同时，再将 table 的 display 设置为 display: inline-block，这样就可以让表格整体和未设置滚动条一致了。

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody style="display: block; height: 200px; overflow: auto;">
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
      <td>上海</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>30</td>
      <td>广州</td>
    </tr>
  </tbody>
</table>

设置好滚动条后，还可以给 tbody 添加一些样式，使其看起来更美观。比如，可以使用 border-top 和 border-bottom 属性添加边框，也可以使用 background-color 属性添加背景色。

tbody {
  display: block;
  height: 200px;
  overflow: auto;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  background-color: #f5f5f5;
}

除了以上方法，还可以使用 JavaScript 来实现 tbody 的滚动条。具体方法如下：

function setTbodyScroll() {
  var tbody = document.querySelector("tbody");
  tbody.style.height = "200px";
  tbody.style.overflow = "auto";
}

window.onload = setTbodyScroll();

使用 JavaScript 的好处是，可以根据需要动态地设置 tbody 的滚动条。比如，可以根据表格数据的多少来调整滚动条的高度。

最后，补充一些 table 的冷门姿势：