HTML 使用纯 CSS 实现固定表头和固定列的表格

在本文中，我们将介绍如何使用纯 CSS 实现具有固定表头和固定列的表格。固定表头和固定列可以使长表格变得更加易于阅读和导航，特别是当表格有大量数据时。

阅读更多：HTML 教程

HTML 表格的基本结构

首先，让我们创建一个基本的 HTML 表格结构。下面是一个示例：

<table class="table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>国籍</th>
      <th>职业</th>
      <!-- 省略其他列 -->
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>男</td>
      <td>中国</td>
      <td>工程师</td>
      <!-- 省略其他行 -->
    </tr>
  </tbody>
</table>

在这个示例中，我们创建了一个简单的表格，包含了表头和表体。表头是由<thead>标签包裹的一行 <tr>，每个表头单元格由<th>标签表示。表体是由<tbody>标签包裹的多行<tr>，每个单元格由<td>标签表示。

使用 CSS 实现固定表头

要实现固定表头的效果，我们需要使用一些 CSS 属性和技巧。下面是一种实现固定表头的方法：

.table {
  overflow: auto;
}

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

首先，我们将表格容器的overflow属性设置为auto，以便在表格内容过长时显示滚动条。然后，我们将<thead>标签的position属性设置为sticky，这样它就会固定在表格的顶部。我们还可以使用top属性来确定固定表头的位置，并且可以使用background-color属性为固定的表头设置背景颜色。

使用 CSS 实现固定列

与固定表头类似，要实现固定列，我们也需要使用一些 CSS 属性和技巧。下面是一种实现固定列的方法：

.table {
  display: flex;
  overflow-x: auto;
}

.table tr {
  display: contents;
}

.table td:not(:first-child) {
  position: sticky;
  left: 0;
  background-color: #f9f9f9;
}

首先，我们将表格容器的display属性设置为flex，并将overflow-x属性设置为auto，以便在表格内容过宽时显示水平滚动条。然后，我们使用display: contents来使每个单元格在同一行显示，而不是以表格行的方式显示。最后，我们将除了第一个单元格外的所有单元格的position属性设置为sticky，并使用left属性将它们固定在表格的左侧。同样可以使用background-color属性为固定的列设置背景颜色。

完整的 CSS 代码

.table {
  overflow: auto;
  display: flex;
  overflow-x: auto;
}

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

.table td:not(:first-child) {
  position: sticky;
  left: 0;
  background-color: #f9f9f9;
}

使用以上 CSS 代码，我们可以实现同时固定表头和固定列的表格效果。

总结

在本文中，我们介绍了如何使用纯 CSS 实现具有固定表头和固定列的表格。通过设置合适的 CSS 属性和技巧，我们可以使表格更加易于阅读和导航。这种功能对于包含大量数据的长表格尤其有用。希望本文能对你有所帮助！