thead 不能直接设 position: sticky，因其 display 计算值为 table-header-group，不符合 CSS 规范对 sticky 定位元素“必须是块级或行内级”的要求，所有主流浏览器均不支持。
直接给 thead 加 position: sticky 是无效的——浏览器不支持对 thead 元素本身设 sticky，必须落到 th 或 td 上。
为什么 thead 不能直接设 position: sticky
因为 thead 是表格的语义容器，不是渲染层的定位上下文。CSS 规范明确要求 position: sticky 只能作用于“可定位的块级或行内级元素”，而 thead 的 display 计算值是 table-header-group，不属于有效目标。所有主流浏览器（Chrome、Firefox、Safari）都遵循这一限制。
常见错误现象：
- 写了
thead { position: sticky; top: 0; }，但滚动时完全没反应 - DevTools 里看到样式被标记为 “invalid” 或灰色禁用
- 误以为是 z-index 或 background 没设好，反复调试无果
th 上设 position: sticky 的硬性前提
sticky 要生效，必须满足三层结构闭环：滚动容器 → 表格 → 表头单元格。缺一不可。
- 外层容器必须有明确高度 +
overflow-y: auto（不能是overflow: hidden或overflow: visible） -
table本身不能有transform、filter、will-change或contain，否则会切断 sticky 的滚动祖先链 - 每个
th必须显式设置background-color（哪怕只是background: Canvas;），否则 Safari 和部分 Android WebView 会透出下方内容 -
z-index必须大于tbody中所有tr的层叠上下文，建议设为z-index: 10以上
多层标题（colspan/rowspan）下 sticky 失效怎么办
只要 th 用了 colspan 或 rowspan，绝大多数浏览器（尤其是 iOS Safari ≤ 15.3、Firefox ≤ 102）就无法正确计算其粘性锚点，表现为表头闪动、错位、或完全不粘。
可行解法只有两个：
- 放弃原生
thead结构，改用div模拟表头：把带合并的标题拆成独立div，用 JS 同步列宽，并给每个单元格单独加position: sticky; top: 0; - 降级为 JS 方案：监听
scroll，用transform: translateY()动态偏移表头，兼容 iOS 14 / Android 10 等旧系统
不要尝试加 will-change: transform 强制触发渲染——它反而会让 Safari 重绘异常，表头卡死不动。
暗色模式与响应式下的易忽略细节
背景色和滚动容器尺寸在主题切换或视口缩放时极易翻车：
-
background: white在暗色模式下会刺眼，应改用系统色background: Canvas;，或通过@media (prefers-color-scheme: dark)覆盖 - 用
%或vh设容器高度时，若页面有动态 header/footer，会导致滚动区域忽大忽小，建议用max-height+calc()预留空间，例如max-height: calc(100vh - 120px); - 移动端横屏时，
th文字折行会撑高表头，导致top偏移失效；加white-space: nowrap并配合text-overflow: ellipsis更稳妥
真正麻烦的从来不是写几行 CSS，而是当用户切到深色模式、旋转手机、再打开 DevTools 切换设备模拟器时，那个原本好好的表头突然开始闪烁或错位——这时候你得立刻意识到：不是样式漏了，是滚动上下文被悄悄污染了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
