thead不支持position: sticky，因其display计算值为table-header-group，不在规范支持列表中；th上设置sticky常因display非table-cell、父容器无滚动空间、祖先overflow/transform截断或缺失background-color而失效。

thead 根本不支持 position: sticky

不是你写错了，是浏览器压根不解析。thead 的计算 display 值永远是 table-header-group，而 CSS 规范明确限定 position: sticky 只能作用于 block、inline-block、flex、grid 等块级或行内级元素。table-header-group 不在支持列表里。所有主流浏览器（Chrome/Firefox/Safari）都严格遵循这一点——DevTools 里该样式会直接标为 “invalid”，连尝试机会都不给。

th 上设了 sticky 却不动？先查三层干扰

把 sticky 挪到 th 是正确方向，但依然常失效。关键干扰点集中在：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 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 配置

真正容易被忽略的，不是怎么写 sticky，而是谁在悄悄截断它

一个 overflow: hidden、一次 transform 动画、甚至一行没写的 background-color，都可能让整个表头“掉下来”。sticky 不是开关式功能，它是一条脆弱的锚定链——任何一环断裂，效果就消失。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！