HTML 如何让表格的主体部分滚动而保持表头固定

在本文中，我们将介绍如何使用HTML和CSS实现让表格的主体部分滚动，同时保持表头固定的效果。

阅读更多：HTML 教程

方法一：使用CSS的overflow属性

1. 创建HTML基本结构

首先，我们需要创建基本的HTML结构。其中，table元素用于创建表格，thead元素用于定义表格的表头，tbody元素用于定义表格的主体部分。在表头中，需使用th元素来定义表头单元格，而在主体部分，需要使用td元素来定义单元格。

例如：

<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的overflow属性。将表格的主体部分封装在一个滚动容器内，并设置该容器的高度和overflow属性。

在CSS中，使用以下样式来实现：

table {
  width: 100%;
}

tbody {
  height: 300px;  /* 设置高度 */
  overflow-y: scroll;  /* 设置垂直滚动条 */
  display: block;  /* 将tbody元素转换为块级元素 */
}

thead,
tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;  /* 固定表格布局 */
}

thead {
  width: calc(100% - 17px);  /* 为防止滚动条的遮挡，减去滚动条的宽度 */
}

th,
td {
  padding: 8px;
}

3. 示例说明

上述CSS样式的关键是将表格的主体部分封装在一个高度固定、带有垂直滚动条的容器内。通过将tbody元素的display属性设置为block，使其成为块级元素，从而使得容器可以定义固定的高度，并显示垂直滚动条。

在上述示例中，我们设置了表格主体部分的高度为300px，并定义了垂直滚动条。这样，当表格主体中的内容超出300px时，会自动出现滚动条。

同时，由于设置了固定的表格布局和宽度，表头的宽度与表格主体的宽度一致，保证了表格的结构完整性。

方法二：使用position属性和JavaScript

除了CSS的overflow属性，我们还可以结合position属性和JavaScript来实现让表格的主体部分滚动，同时保持表头固定的效果。

1. 添加CSS样式

首先，需要为表格和表格的固定表头定义CSS样式。

在CSS中，使用以下样式来实现：

table {
  width: 100%;
  table-layout: fixed;
}

thead,
tbody {
  display: block;
}

thead {
  position: fixed;
  top: 0;
}

2. 编写JavaScript代码

然后，我们需要编写JavaScript代码，来根据页面滚动的位置，动态修改表头的位置。

window.addEventListener('scroll', function() {
  var table = document.querySelector('table');
  var thead = table.querySelector('thead');
  var tbody = table.querySelector('tbody');

  if (table && thead && tbody) {
    var tableOffsetTop = table.offsetTop;
    var tableOffsetBottom = tableOffsetTop + table.offsetHeight;
    var theadHeight = thead.offsetHeight;

    if (window.pageYOffset >= tableOffsetTop && window.pageYOffset < tableOffsetBottom - theadHeight) {
      thead.style.top = window.pageYOffset + 'px';
    } else if (window.pageYOffset >= tableOffsetBottom - theadHeight) {
      thead.style.top = tableOffsetBottom - theadHeight + 'px';
    } else {
      thead.style.top = tableOffsetTop + 'px';
    }
  }
});