css 实现表格表头和列固定功能

前端

2024-01-05 15:44:11

用 CSS 让表格表头和左侧列在滚动时固定

如果你正在寻找一种方法来让你的表格表头和左侧两列在滚动时固定，那么你就在正确的地方。本文将向你展示如何使用简单的 CSS 代码轻松实现这一功能。

为什么需要这种功能？

在某些情况下，你可能需要在滚动时固定表格的某些部分，例如：

表头：为了让用户即使滚动页面也能看到列标签。
左侧列：为了让用户即使滚动页面也能看到重要信息（例如，产品 ID 或客户姓名）。

如何在 CSS 中实现？

要实现这一功能，你需要使用 CSS 中的 position 属性。以下是分步指南：

1. 创建表格并为其添加 ID

首先，你需要创建一个表格元素并为其添加一个 ID，以便稍后能够通过 CSS 来引用它。

<table id="myTable">
  <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>

2. 固定表头

接下来，你需要为表格的表头部分添加 position: sticky; 属性。这将使表头在滚动时固定在浏览器窗口的顶部。

#myTable thead {
  position: sticky;
  top: 0;
}

3. 固定左侧两列

最后，你需要为表格的左侧两列添加 position: sticky; 属性。这将使左侧两列在滚动时固定在浏览器窗口的左侧。

#myTable tbody tr td:nth-child(1),
#myTable tbody tr td:nth-child(2) {
  position: sticky;
  left: 0;
}

代码示例

下面是完整的 HTML 和 CSS 代码示例：

<table id="myTable">
  <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>

```css
#myTable thead {
  position: sticky;
  top: 0;
}

#myTable tbody tr td:nth-child(1),
#myTable tbody tr td:nth-child(2) {
  position: sticky;
  left: 0;
}