HTML表格实现表头冻结的最简可靠方案是为每个<th>设置position: sticky; top: 0;，并包裹在具有明确高度、overflow-y: auto的容器中；不能作用于<thead>或<table>本身，且需配合table-layout: fixed与显式列宽控制以避免错位。
HTML表格怎么实现表头冻结（thead固定）
纯CSS就能让 <thead> 在滚动时保持不动，但必须满足两个硬性条件：表格容器需有明确高度 + 设置 overflow-y: auto，且 <tbody> 不能设 display: block（否则会破坏表格语义和单元格对齐）。
常见错误是给整个 <table> 加 position: sticky —— 这行不通，sticky 对 <thead> 子元素（如 <tr>）才有效：
<table style="border-collapse: collapse; width: 100%;">
<thead>
<tr>
<th style="position: sticky; top: 0; background: #f5f5f5; z-index: 10;">姓名</th>
<th style="position: sticky; top: 0; background: #f5f5f5; z-index: 10;">邮箱</th>
<th style="position: sticky; top: 0; background: #f5f5f5; z-index: 10;">部门</th>
</tr>
</thead>
<tbody>
<tr><td>张三</td><td>zhang@example.com</td><td>前端</td></tr>
<!-- 更多行... -->
</tbody>
</table>- 每个
<th>都要单独加position: sticky; top: 0，只设在<tr>上无效 -
z-index必须大于 tbody 内容，否则滚动时会被遮盖 - 如果表格用了
table-layout: fixed，列宽需提前用width或min-width控制，否则 sticky 后列宽易错乱
如何同时冻结首列（left: 0）+ 表头（top: 0）
这是真正接近 Excel 的双冻结效果，但 CSS 原生不支持二维 sticky（即同时 top 和 left），必须拆解为「表头行固定」+「首列单元格单独 sticky」。
关键点在于：第一列的 <th> 和所有 <td> 都要设 position: sticky; left: 0，且需确保它们背景色覆盖、z-index 层级高于其他列：
立即学习“前端免费学习笔记（深入）”；
<th style="position: sticky; left: 0; top: 0; background: #eef; z-index: 20;">ID</th> <td style="position: sticky; left: 0; background: #fff; z-index: 10;">1001</td>
- 首列所有单元格（
<th>和<td>）必须统一设left: 0，否则滚动时会出现空白或重叠 -
z-index要分层：表头首列 > 其他表头 > 首列数据 > 其他数据，否则视觉错乱 - Chrome 和 Edge 支持良好，Firefox 对多方向 sticky 的渲染偶有偏移，建议加
backface-visibility: hidden修复
为什么 tbody 滚动后列宽错位？
根本原因是浏览器在 sticky 元素脱离文档流后，不再参与表格自动列宽计算。一旦某列内容变长，其他列不会自动适应，导致对不齐。
- 强制用
table-layout: fixed，并在<col>或第一行<th>中显式定义width（如width: 120px） - 避免在 sticky 单元格里用
white-space: normal+ 长文本，换行会撑高行高，破坏冻结行高度一致性 - 如果列数多、内容动态，优先用 JS 库（如
fixed-table-header）做列宽同步，纯 CSS 难以兜底
移动端适配和性能要注意什么
在 iOS Safari 上，position: sticky 对表格单元格的支持不稳定，常出现卡顿或失效；Android Chrome 则相对可靠。
- 务必加
-webkit-overflow-scrolling: touch到容器，否则 iOS 滚动卡顿明显 - 冻结区域不要过多（比如同时 freeze 3 列 + 2 行），iOS 渲染压力大，容易掉帧
- 如果数据量超 500 行，建议配合虚拟滚动（如
react-window或手写IntersectionObserver），否则页面直接卡死
双方向冻结看着简单，实际要同时稳住布局、对齐、滚动行为和跨端表现，最易被忽略的是 z-index 层级和 table-layout 的隐式依赖——少设一个，就可能整列飘走。
