如何仅通过 CSS 实现固定表头和固定第一列的表格？

天天向上

发布： 2024-12-17 09:01:54

原创

544 人浏览过

在纯 CSS 中实现固定标题和固定第一列的表格是一个非常实用的需求，尤其是在展示大量数据时。下面是一个简单且有效的方法，使用 CSS 的 position: sticky 来实现这一效果。这个方法无需 JavaScript，且支持现代浏览器。

1. 固定表头（标题）

使用 position: sticky 属性可以使表头固定在页面顶部，当你滚动页面时，它始终保持可见。

2. 固定第一列

固定第一列也可以通过 position: sticky 来实现。不同的是，第一列需要设置 left: 0 来固定位置。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>固定表头和第一列</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
    }

    th, td {
      padding: 10px;
      text-align: left;
      border: 1px solid #ddd;
    }

    /* 固定表头 */
    th {
      background-color: #f2f2f2;
      position: sticky;
      top: 0;
      z-index: 1; /* 确保表头在内容之上 */
    }

    /* 固定第一列 */
    td:first-child, th:first-child {
      position: sticky;
      left: 0;
      background-color: #f2f2f2;
      z-index: 2; /* 确保第一列在其他列之上 */
    }

    /* 为了使第二列之后的内容显示正常，给第二列添加 padding-left */
    td:nth-child(n+2), th:nth-child(n+2) {
      padding-left: 15px;
    }

    /* 给表格添加滚动条 */
    tbody {
      display: block;
      max-height: 400px;
      overflow-y: auto;
    }

    tbody td, tbody th {
      width: 150px; /* 可以根据需要调整每列的宽度 */
    }

    /* Optional: 给表头添加一些样式 */
    th {
      font-weight: bold;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>职位</th>
        <th>城市</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>28</td>
        <td>工程师</td>
        <td>北京</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>34</td>
        <td>设计师</td>
        <td>上海</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>25</td>
        <td>产品经理</td>
        <td>广州</td>
      </tr>
      <tr>
        <td>赵六</td>
        <td>40</td>
        <td>CEO</td>
        <td>深圳</td>
      </tr>
      <tr>
        <td>孙七</td>
        <td>29</td>
        <td>HR</td>
        <td>成都</td>
      </tr>
      <tr>
        <td>周八</td>
        <td>31</td>
        <td>市场专员</td>
        <td>重庆</td>
      </tr>
      <!-- 添加更多数据行以演示滚动效果 -->
    </tbody>
  </table>
</body>
</html>

解释：

固定表头：通过 position: sticky; top: 0; 实现表头固定在页面顶部。

top: 0 使表头紧贴页面顶部。
z-index: 1 确保表头在表格内容之上。

固定第一列：通过 position: sticky; left: 0; 来固定第一列。

left: 0 使第一列固定在左边。
z-index: 2 确保第一列位于其他列内容之上，避免被覆盖。

滚动表格主体内容：通过设置 tbody 为 display: block; 来使表格的主体部分滚动。

max-height: 400px; overflow-y: auto; 控制表格主体区域的滚动。
通过 width 设置每一列的宽度，确保列宽一致。

table-layout: fixed;：通过固定表格的布局，可以保证所有列的宽度一致。

注意事项：

position: sticky 在一些老旧浏览器（如 Internet Explorer）中可能不支持，需要检查浏览器兼容性。
使用 z-index 确保固定的标题和列能够在其他内容之上显示。
表格内容太长时，滚动区域需要设置合适的 max-height，否则没有滚动效果。

总结：

通过 position: sticky，你可以简单有效地实现固定表头和固定第一列的表格布局。这个方法简单、易于实现，并且不需要使用 JavaScript，非常适合现代网页开发。

更多详细内容请关注其他相关文章！