直接给thead加position: sticky或sticky top-0永远无效，因浏览器规范禁止对display为table-header-group的元素启用sticky；必须逐个为th设置sticky top-0，并满足三硬条件：父容器max-height+overflow-y:auto、th显式background-color和z-index≥10。

直接给 thead 加 position: sticky 或 sticky top-0 永远不会生效——这不是写法问题，是浏览器规范明确禁止。 你看到样式出现在 DevTools 的 Styles 面板里，但 Computed 面板中 position 值始终是 static，说明它压根没进入 sticky 流程。

为什么 thead 上的 sticky 完全被忽略

thead 的计算 display 值永远是 table-header-group，而 CSS 规范只允许 sticky 作用于 block、inline-block、flex、grid 等 display 类型。所有主流浏览器（Chrome/Firefox/Safari）都严格遵循这点，连尝试都不会做。

• 别在 thead、tr 或 table 标签上写 sticky —— 它们不是定位目标
• 真正要“粘住”的是每个 th（和必要时的 td），必须逐个设置
• 即使写了 thead th { position: sticky; top: 0; }，也常因三层干扰失效：父容器无滚动上下文、祖先有 transform/overflow、th 自身 display 被覆盖

th 加了 sticky top-0 还不动？先查这三处硬条件

让 th 真正吸顶，三个条件缺一不可，少一个就退化为普通定位：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 包裹表格的容器（比如 <div class="table-container">）必须设 <code>max-height（如 max-h-96） + overflow-y: auto；仅靠 h-full 或 min-h-96 不行
• th 必须显式声明 background-color（哪怕 bg-white），否则滚动时下方内容会透出，看起来像“没粘住”
• z-index 必须显式设置（如 z-10 或更高），不能是 auto；tbody 行默认层叠在表头之上，不设就会被盖住

列宽错位、表头和内容不对齐怎么办

sticky 生效后常见视觉错位，根源不在定位，而在表格渲染机制本身：thead 和 tbody 默认各自计算列宽。解决路径很窄：

• 加 table-fixed（即 table-layout: fixed），强制列宽由第一行决定
• 给每个 th 和对应列的 td 显式设相同宽度，如 w-32 或 min-w-[120px]
• 避免用 colgroup 控制列宽——Tailwind 中它无法响应式生效，且易被 JS 框架动态覆盖
• 长文本务必加 whitespace-nowrap 或 truncate，防止换行撑开列宽导致错位

弹窗、Modal、Offcanvas 里 sticky 失效的隐蔽原因

这些组件常自带 transform（如 fade-in 动画）、filter 或 will-change，它们会创建新层叠上下文，把 sticky 的锚定参考从你设的 .scroll-container 变成该 Modal 自身——而 Modal 通常不可滚动，sticky 就彻底失效。

• 打开 DevTools，检查 th 的 Computed position 是否为 static；如果是，往上逐级点开祖先元素的 Computed 面板，看哪个节点的 overflow 计算值是 hidden、auto 或 scroll，或 transform 值非 none
• 临时把可疑祖先的 transform 改成 none，如果 sticky 立刻恢复，就确认是它截断了
• 必须保留动画？用 clip-path: inset(0) 替代 overflow: hidden，它不阻断 sticky，且兼容 Chrome 55+/Firefox 54+/Safari 15.4+

最易被忽略的一点：iOS Safari 15.2–15.3 存在严重 sticky bug，吸顶错位、卡顿、甚至触发后无法恢复——@supports (position: sticky) 检测不到这个版本缺陷，只能靠 UA 判断或降级处理。