CSS 如何实现只有 tbody 滚动的100%高度表格

在本文中，我们将介绍如何使用 CSS 实现只有 tbody 滚动的100%高度表格。

阅读更多：CSS 教程

问题描述

在 web 开发中，经常会遇到需要在表格中展示大量数据的情况。当表格中的数据过多时，页面可能会出现滚动条。

通常情况下，当我们给表格设置固定的高度时，整个表格（包括表头和表体）都会出现滚动条。然而，在某些情况下，我们可能只想让表格的主体部分（tbody）出现滚动条，而表头部分（thead）则保持固定。本文将介绍一种方法，帮助我们实现这样的效果。

方法解析

要实现只有 tbody 滚动的100%高度表格，我们需要借助 CSS 中的一些技巧。下面是实现的详细步骤。

步骤1：HTML 结构

首先，我们需要正确的 HTML 结构来构建表格。以下是一个例子：

<table class="scrollable-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>

步骤2：CSS 样式

接下来，我们需要使用 CSS 样式来实现这个效果。首先，我们设置表格的样式为 display: flex，使其具备弹性布局的特性。

.scrollable-table {
  display: flex;
}

然后，我们将 thead 的 position 属性设置为 sticky，使其在滚动时保持固定。

.scrollable-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #fff;
}

最后，我们将 tbody 设置为可滚动，并设置其高度为100%。

.scrollable-table tbody {
  max-height: calc(100vh - 100px); /* 100px 可根据实际情况调整 */
  overflow-y: auto;
}

步骤3：调整样式

根据实际需求，您还可以进一步调整样式，以满足您的设计需求。例如，您可以修改表格的颜色、字体样式等。

示例

为了更好地理解这个方法，我们来看一个实际的示例。

<!DOCTYPE html>
<html>
  <head>
    <style>
      .scrollable-table {
        display: flex;
      }

      .scrollable-table thead th {
        position: sticky;
        top: 0;
        z-index: 99;
        background-color: #f7f7f7;
      }

      .scrollable-table tbody {
        max-height: 300px;
        overflow-y: auto;
      }
    </style>
  </head>
  <body>
    <table class="scrollable-table">
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>城市</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>张三</td>
          <td>25</td>
          <td>北京</td>
        </tr>
        <!-- 更多数据行 -->
      </tbody>
    </table>
  </body>
</html>

您可以在浏览器中运行该示例，查看表格的滚动效果。