带粘性表头的可滚动HTML表格：表格主体滚动穿透表头问题

当表格不是页面唯一元素时，tbody内容滚动时会跑到sticky表头上方，核心原因是border-collapse: collapse导致的层级计算异常，加上容器没有形成独立堆叠上下文。以下是修复方案：

关键修改点 #

• 把表格的border-collapse: collapse改成border-collapse: separate，同时设置border-spacing: 0，既保持边框无缝的视觉效果，又解决层级重叠问题
• 给thead的th加底部边框，tbody的tr加顶部边框，替代合并边框的视觉效果
• 给表格容器tableFixHead加上position: relative，创建独立堆叠上下文，避免外部元素影响表头层级
• 确保表头th的背景色不透明，完全遮挡下方内容

修复后的代码 #

CSS #

.tableFixHead {
  overflow: auto;
  height: 100px;
  position: relative; /* 创建堆叠上下文 */
}
.tableFixHead thead th {
  position: sticky;
  top: 0;
  z-index: 2; /* 提升层级，确保在tbody上方 */
  background: #eee; /* 不透明背景，遮挡下方内容 */
  border-bottom: 1px solid #ccc; /* 替代合并边框 */
}

/* 表格基础样式调整 */
table {
  border-collapse: separate; /* 替换collapse */
  border-spacing: 0; /* 模拟合并边框的间距 */
  width: 100%;
}
th, td {
  padding: 8px 16px;
  border-right: 1px solid #ccc; /* 保持列边框 */
}
th:last-child, td:last-child {
  border-right: none; /* 最后一列去掉右边框 */
}
tbody tr {
  border-top: 1px solid #ccc; /* 行之间的边框 */
}
tbody tr:first-child {
  border-top: none; /* 第一行去掉顶部边框，避免和表头边框重复 */
}

HTML #

<div class="tableFixHead">
  <table>
    <thead>
      <tr><th>TH 1</th><th>TH 2</th></tr>
    </thead>
    <tbody>
      <tr><td>A1</td><td>A2</td></tr>
      <tr><td>B1</td><td>B2</td></tr>
      <tr><td>C1</td><td>C2</td></tr>
      <tr><td>D1</td><td>D2</td></tr>
      <tr><td>E1</td><td>E2</td></tr>
      <tr><td>F1</td><td>F2</td></tr>
      <tr><td>G1</td><td>G2</td></tr>
    </tbody>
  </table>
</div>

额外说明 #

如果页面中还有其他带z-index的元素，只要表格容器有position: relative，表头的z-index就只会在容器内生效，不会和外部元素冲突。另外，不透明背景是必须的，否则下方内容还是会透出来。

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