结论：position: sticky 是当前唯一靠谱的纯 css 方案，但必须同时满足容器可滚动、table-layout: fixed、left: 0 或 top: 0、显式 z-index 四个条件，缺一不可。
直接说结论：用 position: sticky 是当前唯一靠谱的纯 CSS 方案，但必须同时满足容器可滚动、table-layout: fixed、left: 0 或 top: 0、显式 z-index 四个条件，缺一不可——漏掉任意一个，首行/首列就会“闪一下就消失”或“被盖住”。
为什么 position: sticky 在表格里经常失效
它不是“独立生效”的定位方式，而是依赖滚动上下文和祖先元素的渲染层叠规则。常见失效场景包括：
-
table父容器没设overflow: auto或overflow-x: auto，sticky 根本没触发条件 -
table-layout: auto（默认值）导致列宽随内容伸缩，sticky 的锚点位置不断漂移 - 只给
th:first-child加了position: sticky，但td行没同步设置，结果数据行首列不固定 -
z-index没写，或写在非定位元素上（比如只写了z-index却忘了position: sticky），被后续列直接盖住 - 祖先元素用了
transform、filter、will-change，会创建新的层叠上下文，切断 sticky 的滚动感知链
table-layout: fixed 不是可选项，是硬性前提
自动布局下，浏览器要等所有单元格内容渲染完才确定列宽，而 sticky 定位是在布局阶段计算的——时间差导致偏移错乱。用 fixed 后，列宽由 <col> 或首行 <th> 的 <code>width 决定，定位基准稳定。
- 必须显式写
table { table-layout: fixed; width: 100%; } - 推荐用
<col>标签定义宽度，比在th上写width更可靠：<col style="width: 120px"> <col style="width: 200px"> - 如果列数多且宽度不确定，可用
minmax(120px, 1fr)配合grid替代方案，但那就不是原生表格了
首行 + 首列双向固定时，z-index 必须分层处理
左上角那个单元格（thead th:first-child）既是首行又是首列，必须拥有最高层级，否则会出现“表头盖不住第一列”或“第一列切掉表头左边”的视觉撕裂。
thead th { position: sticky; top: 0; z-index: 2; }tbody td:first-child, tbody th:first-child { position: sticky; left: 0; z-index: 1; }-
thead th:first-child { z-index: 3; }—— 这一行不能少，且数值必须严格大于其他两个 - 所有 sticky 元素都要加
background-color，否则滚动时底色透出，看起来像闪烁
容易被忽略的兼容与边界问题
看似配置齐了就能跑，但实际部署常卡在这些细节上：
- Safari 13.1+ 才支持
sticky在<table> 内部生效，旧版 Safari 会完全忽略；如需兼容，得降级用 JS 模拟或改用 <code>position: absolute+ resize 监听（但会丢语义和可访问性） - 打印样式表里
sticky默认失效，如果报表要导出 PDF，得额外写@media print { ... }覆盖 - 移动端 iOS Safari 滚动惯性大，有时 sticky 会“滞后半拍”，加
will-change: transform可缓解，但别滥用，否则触发不必要的图层合成 - 不要给
table或其直接父容器设transform，哪怕只是transform: translateZ(0)，都会让 sticky 失效
真正难的从来不是加几行 CSS，而是确认整个渲染链路里没有隐式创建新层叠上下文、没有动态改变 table-layout、也没有在 JS 里无意重置了 overflow。一旦出现错位，优先检查这三处。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
