sticky top-0 在 thead 上不生效，是因为 position: sticky 的定位参考是最近的有滚动机制的祖先容器，需确保其设 overflow-y: auto 且有明确高度，同时必须给每个 th 而非 thead 添加 sticky top-0 和足够 z-index，并配合 table-fixed 及统一列宽以防止错位。

sticky top-0 在 table thead 上不生效？先查父容器 overflow

直接给 thead 加 sticky top-0 没反应，90% 是因为它的可滚动祖先容器设置了 overflow: hidden、overflow: scroll 或 overflow: auto，但本身高度不够或没触发滚动上下文。

position: sticky 的定位参考是「最近的有滚动机制的祖先」，不是视口。如果这个祖先被 overflow 截断，或者高度小于内容，sticky 就不会触发。

• 检查包裹表格的容器（比如 div.table-container），必须设 overflow-y: auto 且有明确高度（如 h-96、max-h-96）
• 确保该容器没有 transform、filter、perspective —— 这些会创建新层叠上下文，打断 sticky 定位链
• body 或 layout 级 div 若设了 overflow-x: hidden，也可能意外阻断，建议只在必要容器上设 overflow

thead 内 th 必须单独设 sticky，不能只写在 thead 上

thead 是语义容器，浏览器不把它当作 sticky 的作用目标；真正要“粘住”的是每个 th 单元格。只给 thead 加 sticky top-0 是无效的。

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

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

下载

• 给每个 th 加 sticky top-0，同时配 z-10 或更高（防止被 tbody 内容遮挡）
• 若表格有边框或 padding，加 bg-white 和 border-b 保证视觉层级清晰
• 为保持列宽一致，强烈建议加 table-layout: fixed（对应 Tailwind 的 table-fixed 类）

tbody 滚动时表头错位？列宽和 white-space 是关键

即使 sticky 生效，常见问题是表头列宽和 tbody 内容列宽不一致，导致错位——这不是 sticky 问题，而是表格渲染机制导致的。

• 必须用 table-fixed，否则浏览器按内容自动分配列宽，thead 和 tbody 会各自计算
• 给每个 th 和对应 td 设相同宽度（如 w-32、min-w-[120px]），或用 flex + grid 替代原生 table（更可控）
• 长文本溢出时加 whitespace-nowrap 或 truncate，避免换行撑开列宽
• 不要依赖 colgroup，Tailwind 中它无法响应式控制，优先用类直接写在单元格上

移动端 Safari 表头闪动或失效？注意 safe-area 和 z-index

iOS 15.4 以下版本对 sticky 触发条件更苛刻：缺少 min-height、z-index 不显式声明、或地址栏缩放抖动，都会让表头回退成 static。

• 包裹容器用 min-h-[400px] 而非 h-[400px]，避免 Safari 高度计算失败
• th 必须显式设 z-50 或更高（z-10 在某些层叠场景下不够）
• 需要避开顶部安全区时，用 top-safe-0（需启用 @tailwindcss/aspect-ratio 插件并配置 safe-area-insets）
• 测试时打开 Safari 开发者工具 → “Toggle Element Inspector”，手动滚动看 computed position 是否从 relative 切换为 sticky

真正卡住人的从来不是 sticky 类名拼错，而是父容器悄悄加了 overflow: hidden，或是忘了给 th 单独加 top-0，又或者列宽没锁死导致滚动时错位——这些细节不逐项验证，光调样式只会越调越乱。

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