直接给thead加sticky top-0无效，因浏览器不支持其display: table-header-group；必须作用于th，且外层容器需同时满足max-h-96、overflow-y-auto和overflow-x-auto，th还需bg-white、z-10及table-fixed防错位。
直接给 thead 加 sticky top-0 几乎肯定不生效——问题不在写法，而在滚动上下文缺失或层叠顺序被破坏。
为什么 sticky top-0 在 th 上没反应
浏览器只认「最近的、有 overflow 的块级祖先」作为 sticky 的锚点。table 默认不是块级元素，也不创建滚动上下文；thead 更不是可定位目标，真正要粘住的是每个 th。
- 外层容器没设
overflow-y-auto或max-h-96类，tbody就会把整个表格撑开，sticky 失去触发条件 - 父容器加了
transform（如scale-100）、filter或will-change，Safari 会直接禁用 sticky -
th被 Tailwind 的flex、block等类覆盖了默认display: table-cell，Firefox 下直接失效 - 没显式设
z-10或更高，tbody内容滚动时会盖住表头
必须同时满足的三个父容器条件
让 th 真正粘住，外层包裹容器不能只靠一个类解决：
- 必须有明确高度控制：用
max-h-96、h-[400px]或min-h-[400px]（Safari 推荐后者，避免高度计算失败） - 必须启用纵向滚动：
overflow-y-auto—— 没它，tbody不会滚动，sticky 就无从谈起 - 若表格本身超宽，还需横向滚动支持：
overflow-x-auto，且外层容器需是块级（Tailwind v3.3+ 默认满足）
三者缺一不可。常见错误是只加 overflow-y-auto 却忘了设高度，或只设 h-screen 导致容器高度等于视口而非内容区。
列宽错位、滚动闪动、背景透出怎么修
即使 sticky 生效，视觉异常几乎都源于列宽计算和层叠细节：
- 必须加
table-fixed，否则thead和tbody各自按内容算列宽，必然错位 - 每个
th和对应td都得设相同宽度，如w-32、min-w-[120px]，别依赖colgroup -
th必须带bg-white+z-10，否则滚动瞬间露出下面的td边框或背景 - 移动端 Safari 15.4 以下版本要求更严：
top-safe-0仅在启用@tailwindcss/safe-area-insets插件后才有效，否则回退用top-0，二者不可共存
移动端滑不动、点击后跳回左上角
这不是 bug，是浏览器策略和框架重渲染的副作用：
- iOS Safari 默认禁用非原生滚动区域的触摸拖拽，必须加
touch-pan-x（本质是touch-action: pan-x） - React/Vue 中表格重渲染会重置
scrollLeft，需用 ref 手动保存并恢复，或改用 CSS Grid/Flex 模拟表格流式布局 - 别在表格或其父级加
user-select: none或pointer-events: none，它们会拦截 touch 事件
最易被忽略的一点：所有这些约束（table-fixed、overflow、z-index、bg-white）必须同时存在，少一个就可能在某个浏览器或设备上突然失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
