position: sticky 在 th 上失效主因是父容器 overflow 截断或 table 缺乏层叠上下文；需确保父 div 有 overflow-x: auto、thead 结构完整、th 保持 display: table-cell 且无 transform 等干扰属性。
为什么 position: sticky 在 th 上没反应
常见错误是直接给 th 加 position: sticky; top: 0，但表头纹丝不动。根本原因：父容器（thead 或 table）的 overflow 值为 hidden、auto 或 scroll 时，会截断粘性行为；更隐蔽的是，table 元素本身不创建新的层叠上下文或块格式化上下文，导致粘性定位“找不到参照边界”。
- 确保
table的父容器（比如一个div）设置了overflow-x: auto（横向滚动必须），且高度可控（如max-height: 400px） -
thead必须存在且包含tr和th，不能用div模拟表头结构 -
th需显式设置background-color，否则滚动时可能透出下面的行 - 避免在
th上同时设transform、filter或will-change，这些会破坏粘性触发条件
Chrome/Firefox 表现不一致？检查 display 值
Firefox 对 sticky 在表格单元格中的支持更严格：如果 th 的计算 display 不是 table-cell（例如被 display: block 覆盖），就会失效；Chrome 则偶尔“宽容”一些，容易掩盖问题。
- 不要重写
th的display，尤其避免display: flex或display: grid - 若需内部布局，用子元素（如
div）包裹内容，而不是改th自身 - 用浏览器开发者工具检查
Computed面板里的display，确认是table-cell - 注意
border-collapse: collapse不影响粘性，但border-collapse: separate下边框间距可能导致视觉错位
滚动时表头闪烁或错位
本质是渲染层叠加顺序和重绘节奏问题。粘性定位依赖浏览器对滚动容器的监听，而表格渲染本身开销大，轻微卡顿就会让 top 偏移“跳变”。
- 给
th加backface-visibility: hidden或transform: translateZ(0)可强制 GPU 加速（仅限必要时，别滥用） - 避免在
th内使用box-shadow或渐变背景，这些会显著增加重绘成本 - 如果表格列很多，考虑限制固定列数（只对前 3–5 列设
sticky），其余列保持常规布局 - 移动端 Safari 对
sticky支持较弱，iOS 15.4+ 才稳定，旧版本建议降级为 JS 滚动监听 +position: fixed模拟
兼容性兜底：什么时候该放弃纯 CSS 方案
当项目需支持 IE、旧版 Safari（sticky 就不是可靠选择。
- IE 完全不支持
position: sticky，必须用 JS（如IntersectionObserver监听thead进入视口） - 若表格启用了虚拟滚动（如
react-window），sticky会因 DOM 节点复用而失效，得靠库自身 API 控制表头渲染 - 多级表头（
colspan/rowspan）下，sticky只能作用于单个th，无法联动固定整行或整列，此时必须 JS 协调
真正麻烦的不是加那行 position: sticky，而是验证它在所有目标环境里都按预期“粘住”——尤其是用户快速滚动、缩放页面、切到后台再切回来这几个瞬间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
