表格固定标题 - CSS

简介

在网页开发过程中，经常会使用表格来展示数据。但是当表格的内容较长时，表格的标题通常会在滚动时消失，导致用户难以知道当前所浏览的数据属于哪个列。为了解决这个问题，可以使用 CSS 来实现表格固定标题，使标题在滚动时保持可见。

实现步骤

1. 创建一个包含表格的容器，并设置其样式为固定大小的区域。
2. 将表格的标题行固定在容器的顶部，使其不随滚动条滚动。
3. 设置容器为滚动条可见的区域，使表格内容可以滚动。

示例代码

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>标题1</th>
        <th>标题2</th>
        <th>标题3</th>
        <!-- 更多标题列... -->
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>数据1</td>
        <td>数据2</td>
        <td>数据3</td>
        <!-- 更多数据列... -->
      </tr>
    </tbody>
  </table>
</div>

.table-container {
  width: 100%;
  height: 300px;
  overflow-y: scroll;
}

.table-container table {
  table-layout: fixed;
  width: 100%;
}

.table-container thead {
  position: sticky;
  top: 0;
  background-color: #fff;
}

代码说明

• 创建一个带有类名为 .table-container 的 div 元素，作为表格的容器。
• 设置容器的宽度为 100% ，高度为 300px ，并将超出容器高度的部分以滚动条的形式展示。
• 设置表格的宽度为 100%，并将表格布局设置为固定布局。
• 将表格的 <thead> 元素的位置设置为 sticky ，并设置其距离顶部的位置为 0 ，让标题行始终固定在容器的顶部。
• 为 <thead> 元素设置一个背景色（如白色），以便与表格内容区分开。

结论

通过以上代码片段，我们可以实现一个具有固定标题的表格。用户在滚动表格内容时，标题行会一直保持可见，方便用户查看当前列的数据。该实现方法可以提升用户体验，特别适用于展示大量数据的表格页面。