thead不支持sticky定位，因浏览器规范禁止对display为table-header-group的元素启用；必须为每个th设置sticky top-0，并满足外层容器max-height+overflow-y:auto、th显式background-color和z-index≥10三硬条件。
sticky 在 thead 上不生效，是因为浏览器根本不支持对 thead 元素应用 position: sticky；真正要加 sticky top-0 的是每个 th，且必须配合外层容器的滚动上下文和列宽控制，否则必然错位或失效。
为什么给 th 加 sticky top-0 还是没反应
根本原因不是写法错，而是滚动上下文缺失或被阻断：
- 外层包裹容器（比如
div.table-container）没设max-h-96或h-[400px]—— 没高度，tbody就不会滚动，sticky永远不触发 - 该容器写了
overflow-y: auto，但祖先元素有overflow: hidden、transform、filter或will-change—— 这些会创建新层叠上下文，直接禁用sticky - 在 Safari（尤其是 iOS 15.2–15.3）中，
h-[400px]可能因高度计算失败而退化，改用min-h-[400px]更稳 -
th被其他类覆盖了display: table-cell（比如误加flex或block），Firefox 下直接失效
必须同时设置的三个父容器条件
缺一不可，否则 th 粘不住：
-
max-h-96（或min-h-[400px]）—— 提供明确高度边界 -
overflow-y-auto—— 启用纵向滚动，让tbody可滚动 -
overflow-x-auto（如果表格超宽）—— 避免横向溢出破坏布局，且确保容器是块级（Tailwind v3.3+ 默认满足）
常见错误：只加 overflow-y-auto 却忘了设高度，或用 h-screen 导致容器高度等于整个视口而非内容区。
列宽错位、背景透出、滚动闪动怎么修
这些都不是 sticky 本身的问题，而是表格渲染细节失控：
- 必须加
table-fixed—— 否则thead和tbody各自按内容算列宽，100% 错位 - 每个
th和对应td都得设相同宽度，如w-32、min-w-[120px]；别依赖colgroup，Tailwind 中它无法响应式控制 -
th必须带bg-white+z-10（iOS 推荐z-50）—— 否则滚动瞬间露出下面的边框或背景色 - 长文本加
whitespace-nowrap或truncate，避免换行撑开列宽
iOS Safari 表头闪动或失效的兼容处理
这不是 bug，是 Safari 对 sticky 触发条件更苛刻：
- 必须显式声明
z-50，z-10在某些层叠上下文中不够 - 避免用
h-[400px]，改用min-h-[400px]防止高度计算失败 - 地址栏缩放抖动时，可用
top-safe-0（需 Tailwind v3.3+ 并启用safe-area-insets插件） - iOS 15.2–15.3 存在已知粘性错位问题，仅靠
@supports (position: sticky)检测不到，真要覆盖就得用IntersectionObserver动态切is-stuck类
最易被忽略的一点：你可能以为加了 sticky 就万事大吉，但实际只要漏掉 table-fixed 或任意一个 th 没设 z-index，用户一滚动就会看到表头“掉下去”或“被盖住”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
