HTML 如何使用CSS制作具有固定标题的可滚动表格

在本文中，我们将介绍如何使用CSS制作一个可滚动的表格，并固定表格的标题部分。这将使得表格内容超过屏幕高度时，用户仍然可以滚动查看表格内容，而表格的标题部分会一直保持固定。

阅读更多：HTML 教程

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>

在上面的代码中，table标签包含了一个thead标签和一个tbody标签。thead标签用于包含表格的标题部分，而tbody标签用于包含表格的内容部分。每个表格标题使用th标签，而每个表格内容使用td标签。

CSS样式

为了实现固定表格标题和可滚动的表格内容，我们需要使用CSS样式对表格进行布局和样式调整。

首先，我们将为表格容器添加一些样式，以控制其大小和滚动行为。

.table-container {
  width: 100%;
  height: 300px;
  overflow-y: scroll;
}

在上面的代码中，我们设置了.table-container的宽度为100%，高度为300像素，并通过overflow-y属性将其垂直方向设置为可滚动。

接下来，我们需要对表格和其中的元素进行一些样式调整。

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 8px;
  border: 1px solid black;
}

在上述代码中，我们设置了表格的宽度为100%并将其边框合并，使得相邻的单元格边框不重复显示。我们还设置了th和td元素的内边距为8像素，并给它们添加了黑色的边框。

为了实现固定表格标题的效果，我们需要用一些额外的CSS样式来控制表格标题的位置和样式。

th {
  position: sticky;
  top: 0;
  background-color: #f2f2f2;
}

在上述代码中，我们使用了position: sticky属性将表格标题固定在屏幕顶部，并使用top: 0属性确保表格标题在垂直方向上保持固定。我们还为表格标题添加了一个灰色的背景颜色，以便更好地与表格内容区分开来。

示例演示

下面是一个完整的示例演示如何使用CSS制作一个具有固定标题和可滚动内容的表格。你可以将代码复制并保存为一个HTML文件，然后在浏览器中打开以查看效果。

<!DOCTYPE html>
<html>
<head>
  <style>
    .table-container {
      width: 100%;
      height: 300px;
      overflow-y: scroll;
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    th, td {
      padding: 8px;
      border: 1px solid black;
    }

    th {
      position: sticky;
      top: 0;
      background-color: #f2f2f2;
    }
  </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>