thead 不支持 position: sticky，因 display 计算值为 table-header-group，不在规范支持列表中；th 设置 sticky 失效主因包括 display 非 table-cell、父容器无滚动空间、祖先 overflow/transform 截断或缺失 background-color。
直接给 thead 加 position: sticky 就是无效的——不是你写错了，是浏览器压根不解析这条声明。
浏览器根本不认 thead 的 position: sticky
所有主流浏览器（Chrome、Firefox、Safari）都严格遵循 CSS 规范：position: sticky 只能作用于 display 为 block、inline-block、flex、grid 等块级或行内级元素。thead 的计算值永远是 table-header-group，不在支持列表里。DevTools 里该样式会直接标为 “invalid”，连尝试机会都不给。
th 上设了 sticky 却不动？先查三层干扰
把 sticky 挪到 th 是正确方向，但依然常失效，关键干扰点集中在：
-
th的Computed display不是table-cell（比如被display: flex或 CSS-in-JS 覆盖）→ Firefox 直接拒掉 - 包裹
table的外层div没设max-height+overflow-y: auto→ 没滚动空间，sticky根本没触发条件 -
table或任意祖先元素设了overflow: hidden/auto/scroll→sticky被截断（比thead不支持还隐蔽） - 祖先用了
transform、filter或will-change→ 创建新层叠上下文，top: 0锚定错位 - 没给
th设background-color→ 滚动时内容透出，看起来像“没粘住”
移动端和旧版浏览器的兜底现实
iOS 15.4 之前，Safari 对表格内 sticky 支持极弱；IE 则完全不支持。这时候纯 CSS 方案已不可靠：
立即学习“前端免费学习笔记（深入）”；
- 别在 iOS 上强依赖
sticky，降级用position: fixed+ JS 监听scroll更可控 - 仍需兼容 IE？必须用
IntersectionObserver监听thead进入视口，动态切换fixed类 - 用了
react-window这类虚拟滚动库？sticky会因 DOM 复用失效，得依赖库自身的headerRenderer或stickyHeader配置
改 display 强制生效：用 block + flex 模拟表格结构
当嵌套复杂、浏览器差异大或需要稳定控制时，绕过原生表格渲染模型是最稳的方案：
- 把
thead设为display: block - 把
tr设为display: flex，用flex: 1或固定width控制列宽 -
th和td保持display: block或flex: 1，再加position: sticky; top: 0; - 必须手动补
background-color和z-index: 1，否则滚动时内容透出 -
border-collapse失效，边框得用padding+border重写
真正容易被忽略的，不是怎么写 sticky，而是谁在悄悄截断它——一个 overflow: hidden、一次 transform 动画、甚至一行没写的 background，都可能让整个表头“掉下来”。
