给加sticky top-0本身没错，但大概率不生效——问题几乎全出在父容器没配对overflow-x-auto和可滚动高度，或无意中触发了新层叠上下文。
直接说结论：给 <th> 加 <code>sticky top-0 本身没错，但大概率不生效——问题几乎全出在父容器没配对 overflow-x-auto 和可滚动高度，或无意中触发了新层叠上下文。
为什么 <th> 上的 <code>sticky top-0 总是没反应
浏览器对表格内 sticky 的支持比普通块级元素严格得多。它不看 <thead> 或 <code><table> 是否有滚动，而是只认「最近的、带 <code>overflow 的块级父容器」作为滚动上下文。而 <table> 默认不是块级容器，也不创建层叠上下文，<code><th> 的 <code>position: sticky 就找不到锚点。
- 最常见错误：把
<table> 直接放在 <code>下，没包任何div，也没设max-h-或h-类 - 另一个高发坑：外层
div加了transform（比如scale-100、rotate-0）或filter，Safari 会直接禁用所有 sticky 行为 - Firefox 更较真：如果
<th> 的计算 <code>display不是table-cell（例如被 Tailwind 的flex或block覆盖），它就彻底失效；Chrome 有时“假装能用”，反而掩盖问题必须配对的两个父容器属性
要让
<th> 真正粘住，外层包裹容器必须同时满足：<code>overflow-x-auto（横向滚动必需）+ 明确的高度控制（纵向滚动必需）。缺一不可。- 横向滚动靠
overflow-x-auto：没有它，<th> 宽度超限也不会出现滚动条，sticky 就没机会触发 <li>纵向滚动靠 <code>max-h-96或h-96这类高度类：否则<tbody> 会把整个表格撑开，失去「固定表头 + 滚动内容」的结构 <li>别用 <code>h-screen包表格——它会让容器高度等于视口，但用户实际滚动的是页面，不是这个容器，sticky 会按视口算，而不是按表格容器算 - 纯桌面端项目：无脑用
top-0，简单可靠 - 含 iOS 用户且页眉/表头内容不能被 Safari 地址栏遮挡：启用插件后用
top-safe-0，并在<th> 上加 <code>bg-white z-10（防透底） - 千万别混用：
top-0 top-safe-0同时写，后者在不支持环境会完全失效，连top-0都不兜底 - 给
<th> 加 <code>bg-white是硬性要求，否则滚动瞬间会露出下面的<td> <li>避免在 <code><th> 内用 <code>box-shadow或渐变背景，这些会显著拖慢重绘，加剧跳变 - 列数多时（比如 >8 列），只对前 3–5 列设
sticky，其余保持默认布局，平衡性能与功能 - 旧版 iOS（scroll + 动态切
position: fixed
top-0和top-safe-0怎么选top-safe-0是 Tailwind v3.3+ 新增的安全区偏移，但它只在启用了@tailwindcss/safe-area-insets插件后才有效。它不会替代top-0，而是降级回退用的。容易被忽略的渲染细节
即使所有结构都对，滚动时表头仍可能闪烁、错位或背景透出——这不是 bug，是浏览器重绘节奏和层叠顺序的问题。
真正卡住人的地方，从来不是类名拼错，而是滚动容器的
overflow和height没配对，或者某层祖先悄悄加了transform—— 这两点在 Safari 上尤其敏感。调的时候建议先删掉所有transform/filter类，再一层层加回去验证。 - 横向滚动靠
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
