HTML 固定表头和固定列的HTML表格

在本文中，我们将介绍如何使用HTML创建一个具有固定表头和固定列的表格。固定表头和固定列可以在滚动表格内容时保持表头和列固定，使用户可以更方便地查看和比较表格数据。

阅读更多：HTML 教程

准备工作

在开始之前，我们需要先准备好需要展示的表格数据。假设我们有一个包含学生考试成绩的表格，包含学生姓名、科目和成绩三列，我们将使用这个表格作为示例来进行演示。

下面是示例表格的数据：

学生姓名	科目	成绩
小明	数学	95
小红	英语	88
小亮	物理	92
小刚	化学	75
小美	历史	80
小华	地理	85
小李	生物	90

创建基本的HTML表格

首先，我们需要创建一个基本的HTML表格，并将表格数据添加到表格中。以下是一个简单的HTML表格代码示例：

<table>
  <thead>
    <tr>
      <th>学生姓名</th>
      <th>科目</th>
      <th>成绩</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>数学</td>
      <td>95</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>英语</td>
      <td>88</td>
    </tr>
    <tr>
      <td>小亮</td>
      <td>物理</td>
      <td>92</td>
    </tr>
    <tr>
      <td>小刚</td>
      <td>化学</td>
      <td>75</td>
    </tr>
    <tr>
      <td>小美</td>
      <td>历史</td>
      <td>80</td>
    </tr>
    <tr>
      <td>小华</td>
      <td>地理</td>
      <td>85</td>
    </tr>
    <tr>
      <td>小李</td>
      <td>生物</td>
      <td>90</td>
    </tr>
  </tbody>
</table>

在上面的示例中，我们使用<table>元素创建了一个表格，使用<thead>元素创建了表头，使用<th>元素定义了表头的每个单元格。表格的内容被放在<tbody>元素中，每一行使用<tr>元素定义，每个单元格使用<td>元素定义。

固定表头

要实现固定表头，在CSS中可以使用position: sticky属性。将以下CSS代码添加到<style>标签或外部样式表中：

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

在上面的CSS代码中，我们将使用position: sticky属性将表头进行固定，top: 0将表头固定在顶部，background-color: #f0f0f0设置了表头的背景色。

固定列

要实现固定列，可以使用CSS中的position: sticky属性和left属性。我们将使用一个新的HTML结构来应用固定列样式。以下是修改后的HTML和CSS代码示例：

<div class="table">
  <table>
    <thead>
      <tr>
        <th>学生姓名</th>
        <th>科目</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>小明</td>
        <td>数学</td>
      </tr>
      <tr>
        <td>小红</td>
        <td>英语</td>
      </tr>
      <tr>
        <td>小亮</td>
        <td>物理</td>
      </tr>
      <tr>
        <td>小刚</td>
        <td>化学</td>
      </tr>
      <tr>
        <td>小美</td>
        <td>历史</td>
      </tr>
      <tr>
        <td>小华</td>
        <td>地理</td>
      </tr>
      <tr>
        <td>小李</td>
        <td>生物</td>
      </tr>
    </tbody>
  </table>
</div>

.table {
  overflow-x: auto;
  width: 300px;
}

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

tbody td:first-child {
  position: sticky;
  left: 0;
  background-color: #f0f0f0;
}

在上面的示例中，我们将表格包裹在一个带有.table类的<div>元素中，并为这个<div>元素添加了overflow-x: auto和width: 300px的样式，以便在有需要时显示滚动条。

并且，我们使用了.table类来定义表格的CSS样式。

tbody td:first-child选择器用来选中第一个单元格，并将其固定在左侧，使用position: sticky和left: 0来实现固定列的效果。

示例完整代码

以下是在HTML中应用了固定表头和固定列的完整示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    .table {
      overflow-x: auto;
      width: 300px;
    }

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

    tbody td:first-child {
      position: sticky;
      left: 0;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <div class="table">
    <table>
      <thead>
        <tr>
          <th>学生姓名</th>
          <th>科目</th>
          <th>成绩</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>小明</td>
          <td>数学</td>
          <td>95</td>
        </tr>
        <tr>
          <td>小红</td>
          <td>英语</td>
          <td>88</td>
        </tr>
        <tr>
          <td>小亮</td>
          <td>物理</td>
          <td>92</td>
        </tr>
        <tr>
          <td>小刚</td>
          <td>化学</td>
          <td>75</td>
        </tr>
        <tr>
          <td>小美</td>
          <td>历史</td>
          <td>80</td>
        </tr>
        <tr>
          <td>小华</td>
          <td>地理</td>
          <td>85</td>
        </tr>
        <tr>
          <td>小李</td>
          <td>生物</td>
          <td>90</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>