th加sticky top-0无效因浏览器只响应最近有纵向滚动能力的块级祖先，必须给每个th设置并满足外层容器max-h-96+overflow-y-auto+块级，同时配table-fixed、统一列宽、bg-white和z-50防错位透出。
sticky top-0 加在 thead 上基本无效——真正要加的是每个 th，且必须满足三层容器条件，否则表头不粘、列错位、滚动卡死。
为什么 th 加了 sticky top-0 还是不动？
浏览器只对「最近的、有纵向滚动能力的块级祖先」响应 sticky 定位。表格本身不是块级元素，thead 也不创建滚动上下文，所以 sticky 必须作用于每个 th，且外层容器得同时满足：
- 有明确高度：用
max-h-96、h-[400px]或更稳妥的min-h-[400px]（Safari 高度计算易失败） - 启用纵向滚动：
overflow-y-auto缺一不可 - 若表格超宽，还需横向滚动支持：
overflow-x-auto，且该容器必须是块级（Tailwind v3.3+ 默认满足）
常见错误：只加 overflow-y-auto 却没设高度，或父容器带 transform、will-change、filter ——这些会直接禁用 sticky。
列宽错位、滚动闪动、背景透出怎么修？
错位不是 sticky 的问题，而是表格渲染机制导致的列宽不一致。解决核心是强制统一宽度计算逻辑：
- 必须加
table-fixed类，否则thead和tbody各自按内容算列宽，必然错位 - 每个
th和对应td都得设相同宽度，如w-32、min-w-[120px]；别依赖<col>，Tailwind 中它无法响应式控制 -
th必须配bg-white+z-10（推荐z-50），否则滚动瞬间露出下面的边框或背景色 - 长文本必须处理：
truncate或whitespace-normal，避免换行撑开列宽
移动端滑不动、滚动后跳回左上角怎么办？
这不是样式问题，是浏览器策略和框架重渲染共同导致的：
- iOS Safari 默认禁用非原生滚动区域的触摸拖拽，必须加
touch-pan-x（本质是touch-action: pan-x） - React/Vue 中表格重渲染会重置容器的
scrollLeft，需用 ref 手动保存并在更新后恢复：setTimeout(() => el.scrollLeft = lastPos, 0) - 绝对不要在表格或其父级加
user-select: none或pointer-events: none，它们会吃掉 touch 事件 - 避免嵌套
overflow-y-auto：外层已设滚动，内部再套一层会导致行为异常甚至最后一项不可见
最易被忽略的一点：内容是否可控？
再稳的 sticky 和 table-fixed，也挡不住后端返回的长 URL、未限制宽度的图片、嵌套 div 或 pre。它们会绕过容器的滚动保护，直接撑破列宽。必须单独加 max-w-full 或 truncate 到这类单元格上——固定表头的成败，往往不在定位逻辑，而在你是否真正约束住了每一处不可控内容。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
