tr上position:sticky在Safari及旧版Chrome中根本无效，因规范禁止table-row作为sticky容器，解析阶段即静默降级为static；唯一稳定解法是将sticky行置于thead内th/td中，并确保table有max-height+overflow-y:auto。
直接说结论： tr 上的 position: sticky 在 Safari（尤其 iOS）和部分旧版 Chrome 中根本不会启动，不是兼容性“差”，而是被规范明确限制——表格行（tr）在多数浏览器中不被视为合法的 sticky 容器，position: sticky 会被静默降级为 static，DevTools 里看到的 position 值就是 static。
为什么 tr 元素上 sticky 总是显示 static？
浏览器解析阶段就跳过 sticky 行为，不是渲染失败。原因有二：
-
tr的默认display是table-row，而 CSS 规范明确要求 sticky 元素的display必须是block、inline-block、flex或grid；table-row不在支持列表中 - Safari 15.4 之前完全不支持
tr+sticky；Chrome 虽然部分支持，但仅限于thead > tr场景，且依赖父table有明确高度和滚动上下文 - 即使强制写
display: block，tr会脱离表格布局逻辑，破坏td对齐、边框合并等行为，得不偿失
替代方案：用 thead + th/td 实现表头粘性
这是唯一稳定跨浏览器的解法，无需 JS，也不改 DOM 结构：
- 把需要粘住的行放在
thead内，th或td元素设position: sticky -
thead必须是table的直接子元素，且table需有显式height或max-height+overflow-y: auto -
th和td必须设top: 0，并确保其display未被覆盖（避免display: table-cell被意外改成inline等）
示例关键代码：
| Name | Age |
|---|---|
| Alice | 32 |
| Bob | 28 |
如果必须让 tbody 中某行 sticky（比如高亮当前行）
不能靠 tr，得绕开表格语义：
- 放弃原生
table，改用div+display: grid或display: flex模拟表格布局 - 把“要 sticky 的行”抽成独立
div，设position: sticky; top: 0，并确保它挂在一个有明确高度、overflow-y: auto且无overflow: hidden/auto/scroll干扰的父容器下 - 特别注意：Grid 容器若用了
grid-template-rows: auto或未设行高，sticky 会失效；应写死如grid-template-rows: 60px 1fr - 避免父级有
transform、will-change或filter，这些会创建新层叠上下文，阻断 sticky
排查时最容易忽略的点
很多人卡在 DevTools 里看到 position: sticky 就以为没问题，其实关键看计算值：
- 选中目标元素后，切到「Computed」面板，**直接查
position的最终值**，不是看 Styles 里写了什么 - 如果显示
static，说明 sticky 流程根本没进，此时再检查tr的display、祖先overflow、height是否满足条件已无意义 - 逐级向上点 parent，在每一层的 Computed 面板里盯紧
overflow-x和overflow-y，iOS Safari 对overflow: hidden的拦截极其严格，哪怕隔了四层也生效 - UI 框架组件（如 Ant Design 的
.ant-table-body、Element Plus 的.el-table__body-wrapper）常悄悄加overflow: hidden，比手写 CSS 更难发现
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
