CSS 固定表头和可滚动内容体

在本文中，我们将介绍如何使用CSS实现固定表头和可滚动的内容体。这种布局模式常见于大型数据表格或数据展示页面，可以使用户在滚动页面时保持表头的可见性，提供更好的用户体验。

阅读更多：CSS 教程

HTML结构

首先，我们需要定义一个HTML结构来容纳表格。通常，我们使用一个包含表头行和内容行的表格，然后将内容行放在一个可滚动的容器内。

<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>

CSS样式

接下来，我们将使用CSS来实现固定表头和可滚动的内容体。

首先，我们将设置表格容器的宽度和高度，并添加overflow: auto属性来实现内容的滚动。同时，我们也需要设置表格的布局方式为fixed，这样表头和内容才能正确对齐。

.table-container {
  width: 100%;
  height: 300px; /* 设置容器的高度 */
  overflow: auto; /* 添加滚动条 */
}

table {
  width: 100%;
  table-layout: fixed; /* 使用固定表格布局 */
}

然后，我们需要使用CSS来固定表头。我们可以将表头行的每个单元格设置为固定宽度，并使用绝对定位将其固定在容器的顶部。

thead th {
  position: sticky;
  top: 0;
  background-color: #f8f8f8; /* 可选，为表头添加背景颜色 */
  /* 设置固定宽度，与表格内容的宽度保持一致 */
}

最后，我们需要使用CSS来调整内容行的宽度，使其与表头对齐。这是因为固定表头会使表格的列宽度发生变化，我们需要手动调整内容行的宽度以保持一致。

tbody td {
  /* 设置内容行的宽度，与表头的宽度保持一致 */
}

示例代码

<!DOCTYPE html>
<html>
<head>
  <title>CSS Table Fixed Header and Scrollable Body</title>
  <style>
    .table-container {
      width: 100%;
      height: 300px; /* 设置容器的高度 */
      overflow: auto; /* 添加滚动条 */
    }

    table {
      width: 100%;
      table-layout: fixed; /* 使用固定表格布局 */
    }

    thead th {
      position: sticky;
      top: 0;
      background-color: #f8f8f8; /* 可选，为表头添加背景颜色 */
      /* 设置固定宽度，与表格内容的宽度保持一致 */
    }

    tbody td {
      /* 设置内容行的宽度，与表头的宽度保持一致 */
    }
  </style>
</head>
<body>
  <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>
</body>
</html>

通过以上代码，我们可以实现一个具有固定表头和可滚动内容体的表格布局。