thead 上 sticky top-0 无效是因为浏览器不支持对 display: table-header-group 元素应用 position: sticky，真正需设置 sticky 的是每个 th，且必须满足滚动上下文、层叠顺序和列宽控制三重条件。

直接给 thead 加 sticky top-0 无效，是因为浏览器根本不支持对 thead 应用 sticky 定位——真正要“粘住”的是每个 th 单元格，且必须满足滚动上下文、层叠顺序、列宽控制三重条件。

为什么 sticky top-0 在 thead 上完全没反应

浏览器把 thead 视为语义容器（display: table-header-group），不是可定位的块级元素，position: sticky 对它不生效。你看到的“没反应”，本质是样式被静默忽略。

• 检查开发者工具的 computed 样式，position 很可能仍是 static
• 哪怕写了 thead.sticky.top-0，也只会让 thead 的 display 被强制覆盖成 block，破坏表格结构
• 真正起作用的是 th.sticky.top-0，且每个 th 都得单独加

th.sticky.top-0 生效但表头一闪就消失或被盖住

这是层叠和滚动上下文断裂的典型表现，不是 sticky 写错了，而是祖先容器“不配合”。

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

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

下载

• 包裹表格的 div 必须同时有：overflow-y-auto + 明确高度（如 max-h-96 或 h-[400px]），缺一不可
• 该容器不能有 transform、filter、will-change —— Safari 下这些会直接禁用 sticky
• th 必须带 z-50 或更高（z-10 在深色主题或带阴影的 tbody 行上常不够）
• th 推荐加 bg-white 和 border-b，否则滚动瞬间会透出下面的 td 边框或背景色

表头和内容列对不齐、错位严重

90% 是表格自动计算列宽导致的：thead 按标题文字撑宽，tbody 按数据内容撑宽，两者根本不同步。

• 必须加 table-fixed 类（对应 table-layout: fixed），强制列宽由第一行决定
• 每个 th 和对应位置的 td 都要设相同宽度，比如 w-32、min-w-[120px]，别依赖 colgroup
• 长文本用 whitespace-nowrap 或 truncate，避免换行撑开列宽
• 如果列数少且需横向滚动，改用 flex + grid-cols-n 比原生 table 更可控

移动端 Safari 滚动卡顿、表头闪动或完全失效

iOS Safari 对 sticky 的触发条件更苛刻，尤其在地址栏缩放、安全区域处理等场景下容易退化。

• 包裹容器优先用 min-h-[400px] 而非 h-[400px]，避免 Safari 高度计算失败
• iOS 15.4 以下版本不支持 top-safe-0，回退用 top-0，二者不可共存
• 若表格超宽，外层容器需加 overflow-x-auto，且确保它是块级（Tailwind v3.3+ 默认满足）
• 不要在表格或其父级加 user-select: none 或 pointer-events: none，iOS 会禁用触摸拖拽

最易被忽略的一点：所有条件都满足后，仍要检查是否在 body 或根级布局容器上误加了 overflow-x: hidden —— 它会意外阻断 sticky 的祖先查找路径，导致整个机制静默失效。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！