滚动 tbody 固定头 - CSS

当涉及到展示大量数据的表格时，如果表格很长，那么当用户需要滚动表格时，表头可以“滚动消失”，造成阅读上的不便。为了解决这个问题，可以使表头保持在页面的顶端，即“固定头”效果。

本文将介绍如何使用 CSS 实现滚动 tbody 固定表头的效果。以下代码片段演示了如何在 HTML 中设置一个带有固定表头的滚动表格：

<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th>表头</th>
        <th>表头</th>
        <th>表头</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>数据</td>
        <td>数据</td>
        <td>数据</td>
      </tr>
      <tr>
        <td>数据</td>
        <td>数据</td>
        <td>数据</td>
      </tr>
      <tr>
        <td>数据</td>
        <td>数据</td>
        <td>数据</td>
      </tr>
      <!-- 表格中的数据行将自动占满高度 -->
    </tbody>
  </table>
</div>

首先，使用 div 元素包装表格，这个 div 元素设置固定的高度和 overflow 属性以启动滚动条。表示表格的 tbody 元素（或实际上，它的父级）将占据剩余的空间。

现在，在 table 元素上添加一个 thead 元素来容纳表头。我们创建一个新的行并在其中添加表头单元格：<th>。

为了使表头固定在页面的顶部，可以使用 position: sticky; 属性。 Sticky 属性告诉浏览器元素应当为相对定位，直到其在视口范围外。然后，它将固定在视口的相应位置，直到其父元素结束。

在这个示例中，表格的第一行是 thead。因此，对 thead 中的每个单元格（即，th 元素）都应用了 sticky 属性，并为其指定了 top 属性。当表格向上滚动时，每个 th 元素都将沿着表格的顶部滚动，直到其填充满当前视口的顶部位置。接下来，使用 CSS 设置表格行的样式以创建斑马线效果。这使得表格更易于阅读。

在使用这个方法时，需要多次测试确保表格呈现正常，并且不会导致与其他元素的重叠或布局问题。此外，不同的浏览器可能会有不同的默认样式和行为，因此需要根据实际情况进行调整。

最终，HTML 和 CSS 代码片段的结构如下所示：

<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th>表头</th>
        <th>表头</th>
        <th>表头</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>数据</td>
        <td>数据</td>
        <td>数据</td>
      </tr>
      <tr>
        <td>数据</td>
        <td>数据</td>
        <td>数据</td>
      </tr>
      <tr>
        <td>数据</td>
        <td>数据</td>
        <td>数据</td>
      </tr>
      <!-- 表格中的数据行将自动占满高度 -->
    </tbody>
  </table>
</div>

.table-wrapper {
  height: 200px;
  overflow-y: auto;
}

.table-wrapper table {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}

.table-wrapper tr:nth-of-type(even) {
  background-color: #f2f2f2;
}

.table-wrapper th {
  position: sticky;
  top: 0;
  background-color: #fff;
}

.table-wrapper th,
.table-wrapper td {
  padding: 12px 15px;
  border: 1px solid #ddd;
}

.table-wrapper td {
  border-top: none;
}

以上是通过 CSS 实现滚动 tbody 固定表头效果的方法，您可以根据实际需求进行调整。