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 是正确方向，但依然常失效，关键干扰点集中在：

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

改 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，都可能让整个表头“掉下来”。

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