html表格实现表头冻结的最简可靠方案是为每个设置position: sticky; top: 0;，并包裹在具有明确高度、overflow-y: auto的容器中；不能作用于或本身，且需配合table-layout: fixed与显式列宽控制以避免错位。
HTML表格怎么实现表头冻结（thead固定）
纯CSS就能让 <thead> 在滚动时保持不动，但必须满足两个硬性条件：表格容器需有明确高度 + 设置 <code>overflow-y: auto，且 <tbody> 不能设 <code>display: block（否则会破坏表格语义和单元格对齐）。
常见错误是给整个 <table> 加 <code>position: sticky —— 这行不通，sticky 对 <thead> 子元素（如 <code><tr>）才有效：<pre class="brush:php;toolbar:false;"></pre>
<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>
<ul><li>每个 <code><th> 都要单独加 <code>position: sticky; top: 0，只设在 <tr> 上无效<li>
<code>z-index 必须大于 tbody 内容，否则滚动时会被遮盖
table-layout: fixed，列宽需提前用 width 或 min-width 控制，否则 sticky 后列宽易错乱如何同时冻结首列（left: 0）+ 表头（top: 0）
这是真正接近 Excel 的双冻结效果，但 CSS 原生不支持二维 sticky（即同时 top 和 left），必须拆解为「表头行固定」+「首列单元格单独 sticky」。
关键点在于：第一列的 <th> 和所有 <code><td> 都要设 <code>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> 和 <code><td>）必须统一设 <code>left: 0，否则滚动时会出现空白或重叠 -
z-index要分层：表头首列 > 其他表头 > 首列数据 > 其他数据，否则视觉错乱 - Chrome 和 Edge 支持良好，Firefox 对多方向 sticky 的渲染偶有偏移，建议加
backface-visibility: hidden修复 - 强制用
table-layout: fixed，并在<col>或第一行<th> 中显式定义 <code>width（如width: 120px） - 避免在 sticky 单元格里用
white-space: normal+ 长文本，换行会撑高行高，破坏冻结行高度一致性 - 如果列数多、内容动态，优先用 JS 库（如
fixed-table-header）做列宽同步，纯 CSS 难以兜底 - 务必加
-webkit-overflow-scrolling: touch到容器，否则 iOS 滚动卡顿明显 - 冻结区域不要过多（比如同时 freeze 3 列 + 2 行），iOS 渲染压力大，容易掉帧
- 如果数据量超 500 行，建议配合虚拟滚动（如
react-window或手写IntersectionObserver），否则页面直接卡死
为什么 tbody 滚动后列宽错位？
根本原因是浏览器在 sticky 元素脱离文档流后，不再参与表格自动列宽计算。一旦某列内容变长，其他列不会自动适应，导致对不齐。
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
移动端适配和性能要注意什么
在 iOS Safari 上，position: sticky 对表格单元格的支持不稳定，常出现卡顿或失效；Android Chrome 则相对可靠。
双方向冻结看着简单，实际要同时稳住布局、对齐、滚动行为和跨端表现，最易被忽略的是 z-index 层级和 table-layout 的隐式依赖——少设一个，就可能整列飘走。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
