position: sticky在thead上无效不是bug而是规范行为，因thead非独立块级容器、无滚动上下文且被浏览器静默丢弃；th上生效需确保父容器overflow为visible、无transform干扰、th保持display:table-cell并设background和z-index。
为什么 position: sticky 在 thead 上直接写就无效
不是浏览器 bug，是 CSS 规范明确忽略：对 <thead>、<tbody>、<tr> 这类表格内部结构元素，position: sticky 声明会被浏览器静默丢弃。根本原因是表格渲染模型与粘性定位机制冲突——thead 不是独立的块级容器，它没有自己的滚动上下文边界，也无法参与 sticky 所需的层叠上下文计算。
th 加了 sticky 但不生效的常见组合原因
即使你把 position: sticky; top: 0 写在 <th> 上，仍可能白写。关键干扰点集中在三层：
- 父容器（
<thead>或外层<div>）设了overflow: hidden、auto或scroll→ 立刻截断粘性行为 - 祖先元素（哪怕隔了几层）用了
transform、filter或will-change→ 创建新层叠上下文，阻断 sticky 的锚定链 -
th自身被改了display（如display: flex、display: block）→ Firefox 会直接拒绝 sticky；Chrome 可能“宽容”但不可靠 - 没给
th显式设置background-color→ 滚动时透出下面内容，看起来像“失效”
跨浏览器可用的稳定写法（Chrome/Firefox/Safari 15.4+）
必须绕过原生表格限制，用语义等效但可控的结构。以下是最小可行方案：
<div class="table-container" style="max-height: 400px; overflow-y: auto;">
<div class="thead" style="display: table-header-group;">
<div class="tr" style="display: table-row;">
<div class="th" style="display: table-cell; position: sticky; top: 0; background: white; z-index: 1;">姓名</div>
<div class="th" style="display: table-cell; position: sticky; top: 0; background: white; z-index: 1;">年龄</div>
</div>
</div>
<div class="tbody" style="display: table-row-group;">
<div class="tr" style="display: table-row;">
<div class="td" style="display: table-cell;">张三</div>
<div class="td" style="display: table-cell;">25</div>
</div>
</div>
</div>
要点：
立即学习“前端免费学习笔记（深入）”；
- 外层
.table-container必须有显式高度 +overflow-y: auto -
.thead用display: table-header-group（⚠️不是table-row-group），否则 Safari 会忽略 -
.th保持display: table-cell，不能覆盖为flex或block - 每个
.th都要加background-color和z-index: 1，不然滚动时视觉错乱
iOS Safari 15.3 及更旧版本怎么办
纯 CSS sticky 在旧版 Safari 中表现极不稳定，甚至完全不触发。此时别硬扛：
- 检测
CSS.supports('position', 'sticky')，失败则降级 - 用
IntersectionObserver监听thead进入视口，动态切position: fixed - 若已用虚拟滚动（如
react-window），sticky 会因 DOM 复用失效，必须依赖库自身 API 控制表头渲染
真正麻烦的从来不是写法本身，而是表格语义、渲染开销、滚动容器层级这三者咬合得过于紧密——稍一松动，sticky 就掉链子。
