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

天天向上

发布： 2024-12-17 09:03:13

原创

236 人浏览过

如果你想要创建一个表格，其中既有固定的标题行，又有固定的第一列，仅使用 CSS 来实现，下面是另一种方法的示例。

示例代码：

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

    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; /* 确保第一列在其他列之上 */
    }

    /* 给每一列固定宽度，确保第一列和其他列对齐 */
    td, th {
      width: 150px;
    }

    /* 使表格内容区域滚动 */
    tbody {
      display: block;
      max-height: 300px;
      overflow-y: auto;
    }

    /* 设置单元格的宽度，使得滚动区域中的单元格宽度一致 */
    tbody td, tbody th {
      width: 150px;
    }
  </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>
      <tr>
        <td>陈九</td>
        <td>26</td>
        <td>销售</td>
        <td>杭州</td>
      </tr>
      <tr>
        <td>吴十</td>
        <td>33</td>
        <td>开发</td>
        <td>武汉</td>
      </tr>
      <!-- 更多行 -->
    </tbody>
  </table>
</body>
</html>

解释：

固定表头：

使用 position: sticky; top: 0; 来使表头固定在页面顶部。
z-index: 1 确保表头在内容之上，不会被其他内容覆盖。

固定第一列：

使用 position: sticky; left: 0; 来使第一列固定在页面左侧。
z-index: 2 确保第一列在表格内容之上，避免被其他列覆盖。

设置表格滚动：

通过 tbody { display: block; max-height: 300px; overflow-y: auto; } 设置表格主体的滚动区域。
max-height 设置了滚动区域的最大高度，可以根据需要调整。
display: block 将 tbody 转为块级元素，允许它独立滚动。

固定宽度：

使用 td, th { width: 150px; } 固定列宽，确保第一列和其他列对齐。
给每个表格单元格都设置了相同的宽度，这样可以确保在滚动时表格内容保持一致。

总结：

这种方法通过简单的 CSS 设置，实现了固定表头和固定第一列的效果，并且在表格内容滚动时，表头和第一列始终保持可见。只需要 position: sticky 和适当的 top、left 属性，就可以实现这一功能。

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