本文介绍解决 HTML 表格启用 position: sticky 表头后，tbody 内容在滚动时意外显示在表头之上的常见视觉缺陷，核心方案是通过重置 .tableFixHead 容器的 padding-top（或 margin-top/border-top）来消除顶部空白导致的错位。
本文介绍解决 html 表格启用 `position: sticky` 表头后，tbody 内容在滚动时意外显示在表头之上的常见视觉缺陷，核心方案是通过重置 `.tablefixhead` 容器的 `padding-top`（或 `margin-top`/`border-top`）来消除顶部空白导致的错位。
在构建具有固定表头（sticky header）的可滚动 HTML 表格时，一个隐蔽却高频出现的问题是：当用户向上滚动 tbody 时，部分数据行会“穿透”表头，出现在 <thead> 的上方区域——这不仅破坏视觉层次，还严重影响用户体验。该问题并非 sticky 属性失效，而是由外层容器的默认边距、内边距或边框引发的布局偏移所致。
根本原因在于：.tableFixHead 容器若存在隐式或显式的 padding-top（例如来自全局 CSS 重置、UI 框架或自定义样式），会导致其内部 <table> 的实际渲染起点上移。而 thead th { top: 0 } 的定位基准是该容器的 内容区顶部；一旦容器自身有 padding-top，top: 0 就会相对于“被垫高”的内容区起始位置计算，造成表头与 tbody 滚动区域之间出现未对齐的间隙，从而让 tbody 内容在滚动过程中短暂覆盖表头。
✅ 正确解决方案是显式清除容器顶部空间干扰：
.tableFixHead {
overflow: auto;
height: 100px;
padding-top: 0; /* 关键修复：强制归零内边距 */
/* 若 padding-top 无效，可尝试以下任一替代方案 */
/* margin-top: 0; */
/* border-top: none; */
}
.tableFixHead thead th {
position: sticky;
top: 0;
z-index: 2; /* 建议提升至 2，确保高于 tbody 内容 */
background: #eee;
}
/* 基础表格样式（保持简洁） */
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px 16px;
border: 1px solid #ddd;
}同时，HTML 结构需保持语义清晰：
<div class="tableFixHead">
<table>
<thead>
<tr>
<th>姓名</th>
<th>邮箱</th>
<th>注册时间</th>
</tr>
</thead>
<tbody>
<tr><td>张三</td><td>zhang@example.com</td><td>2023-01-15</td></tr>
<tr><td>李四</td><td>li@example.com</td><td>2023-02-22</td></tr>
<!-- 更多行... -->
</tbody>
</table>
</div>⚠️ 注意事项：
- z-index 必须为正整数且足够高（推荐 ≥2），否则在复杂 DOM 层级中可能被其他元素遮挡；
- 避免在 .tableFixHead 或 <table> 上设置 transform、filter 等创建新层叠上下文的属性，否则可能使 sticky 失效；
- 若使用 CSS 预处理器（如 Sass），建议将 padding-top: 0 作为 .tableFixHead 的必需声明，而非依赖全局重置；
- 在响应式场景中，可配合 @media 查询动态调整 height，但 padding-top: 0 始终应保留。
该方案轻量、无 JS 依赖、兼容现代浏览器（Chrome 56+、Firefox 59+、Safari 14.1+），是解决 sticky 表头“内容上溢”问题最直接可靠的 CSS 修复方式。
