HTML表格可滚动正文固定标题 - CSS

HTML表格是Web页面中常用的数据展示方式。当表格数据较多时，用户可能需要通过滚动页面来查看整个表格，但这样会导致表格标题随着页面滚动而消失，给用户带来不便。本文将介绍如何使用CSS让表格的正文可以滚动，同时表格标题固定在页面顶部。

实现方法

HTML结构

首先，我们需要先定义好表格的HTML结构，其中表格头部分为固定元素，正文部分为可滚动元素。建议使用table元素作为表格容器，以保证表格结构的清晰。

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>标题1</th>
        <th>标题2</th>
        <th>标题3</th>
        <th>...</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
        <td>...</td>
      </tr>
      <tr>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
        <td>...</td>
      </tr>
      ...
    </tbody>
  </table>
</div>

CSS样式

接下来，我们需要使用CSS样式来实现表格正文滚动和表格标题固定功能。具体思路是：将表格头部分设为固定定位元素，然后给正文部分增加滚动条样式。

.table-container {
  position: relative;
  overflow: auto;
  height: 200px; /* 指定表格高度 */
}
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* 指定列宽度相等 */
}
thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #fff;
}
tbody {
  display: block;
  height: calc(100% - 40px); /* 减去表头高度 */
  overflow-y: scroll;
}
tr {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
td,
th {
  padding: 8px;
  text-align: center;
  border: 1px solid #ddd;
  word-wrap: break-word; /* 处理单元格内容过长换行显示 */
}

上述CSS样式代码中，我们使用了position: sticky属性将thead th元素设为表格头部分，然后通过设置top: 0属性将其固定在页面顶部，而overflow-y: scroll属性则给tbody元素增加了纵向滚动条。

效果演示

在完成上述样式代码的编写后，我们就可以看到表格正文可以滚动，同时表格标题固定在页面顶部的效果。

总结

本文介绍了如何使用CSS让表格正文可以滚动，同时保持表格标题固定在页面顶部。这种实现方式只需要少量CSS样式代码即可，实现了简洁易懂的效果，同时提高了表格可读性和体验。