直接给th加position: sticky; top: 0大概率失效，主因是父容器overflow截断、table缺乏层叠上下文、th display非table-cell或受transform等属性干扰；必须确保外层div设overflow-x:auto、thead结构完整、th保持display:table-cell且有background和z-index。
直接给 th 加 position: sticky; top: 0 大概率失效——不是写法错，是浏览器根本没触发粘性行为。
为什么 position: sticky 在 th 上没反应
常见现象：样式写了、开发者工具里也显示生效，但滚动时表头纹丝不动。核心问题不在 th 本身，而在它的“上下文”被污染：
- 父容器（比如
div.table-container）设了overflow: hidden或overflow: auto，直接截断粘性定位的滚动监听 -
table元素不创建新的块格式化上下文（BFC），thead的包含块和外层滚动容器不一致，sticky 找不到参照边界 -
th的计算display值不是table-cell（例如被display: flex覆盖），Firefox 会直接拒绝 sticky，Chrome 可能“假装正常”，掩盖问题 - 祖先元素加了
transform、filter或will-change，这些都会让 sticky 彻底罢工
必须满足的三个硬性条件
缺一不可，否则 sticky 不会启动：
-
table必须包裹在独立的滚动容器中，例如...
div设置overflow-x: auto（横向滚动必需）和/或max-height: 400px; overflow-y: auto（纵向滚动必需） -
thead必须真实存在，不能用div模拟；内部必须有tr和th，结构完整 -
th保持默认display: table-cell，不重写；显式设置background-color（否则滚动时透出下面的行），并加z-index: 10（否则被tbody盖住）
多级表头或双固定（首列+表头）怎么设 top 和 z-index
不是所有 th 都用 top: 0，层级冲突会导致遮挡或错位：
- 第一级表头（最上面一行）：设
top: 0; z-index: 20 - 第二级表头（合并单元格下的子列）：设
top: 36px（假设第一行高 36px），z-index: 15 - 首列单元格（
th:first-child和td:first-child）：加left: 0; z-index: 25 - 左上角交点（
thead th:first-child）：同时设top: 0; left: 0; z-index: 30 - 避免用
table-layout: auto；改用table-layout: fixed，并为每列th显式设width（如width: 120px），否则列宽浮动导致对齐偏差
移动端和旧浏览器兜底的关键判断点
别等上线才发现 Safari iOS 15.3 或 IE 用户看到的是乱序表头：
- iOS Safari 在 15.4+ 才稳定支持
sticky在表格中的行为；旧版本必须降级为 JS 方案（如用IntersectionObserver监听thead进入视口，动态加position: fixed） - IE 完全不识别
position: sticky，前缀（-webkit-sticky）也无效，硬加只会白忙活 - 如果表格启用了虚拟滚动（如
react-window），DOM 节点复用会让 sticky 状态丢失，此时必须依赖库自身的表头渲染 API，而不是 CSS - 真正容易被忽略的是：框架重渲染（如 React key 变更）后，sticky 状态不会自动恢复，尤其 Safari —— 给表头区域加稳定
key（比如列配置的 hash）比修样式更治本
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
