如何仅让表格数据行滚动？固定顶部内容与表头的实现方案

完全可以用纯CSS实现，不需要复杂JavaScript，具体方案如下：

1. 固定顶部内容 #

给顶部容器添加position: sticky和top: 0，同时设置背景色避免被下方内容穿透：

.top-content {
  position: sticky;
  top: 0;
  background-color: #ffffff;
  padding: 1rem;
  z-index: 2; /* 确保顶部内容在表头之上 */
}

2. 固定表格表头并让数据行滚动 #

通过修改表格的显示属性，让<tbody>成为可滚动区域，同时固定<thead>：

/* 重置表格布局，让tbody可滚动 */
table {
  width: 100%;
  border-collapse: collapse;
  display: block;
}

/* 固定表头，位置接在顶部内容下方 */
thead {
  display: table;
  width: 100%;
  position: sticky;
  top: 60px; /* 此处值等于顶部内容的高度，根据实际调整 */
  background-color: #ffffff;
  z-index: 1;
}

/* 设置tbody的滚动区域 */
tbody {
  display: block;
  max-height: 400px; /* 自定义滚动区域的最大高度 */
  overflow-y: auto;
  width: 100%;
}

/* 统一列宽，避免表头与数据列错位 */
th, td {
  border: 1px solid #dddddd;
  padding: 8px;
  width: 25%; /* 根据实际列数调整，比如4列各占25% */
  text-align: left;
}

调整后的HTML结构（给顶部div添加类名方便样式控制）：

<div class="top-content">
  top content
</div>
<table>
  <thead>
    <tr><th>表头列1</th><th>表头列2</th><th>表头列3</th><th>表头列4</th></tr>
    <tr><th>子表头列1</th><th>子表头列2</th><th>子表头列3</th><th>子表头列4</th></tr>
  </thead>
  <tbody>
    <tr><td>数据行1-1</td><td>数据行1-2</td><td>数据行1-3</td><td>数据行1-4</td></tr>
    <tr><td>数据行2-1</td><td>数据行2-2</td><td>数据行2-3</td><td>数据行2-4</td></tr>
    <!-- 更多数据行 -->
  </tbody>
</table>

关键注意点 #

• 表头的top值必须和顶部内容的高度一致，防止两者重叠
• 必须给<th>和<td>设置统一宽度，否则滚动时表头与数据列会错位
• 固定元素的背景色不能省略，否则下方内容会透过显示

内容的提问来源于stack exchange，提问作者Zoran