position:sticky在thead里为什么没反应
因为 thead 默认不是块级容器，且父元素（table）的 overflow 行为会截断粘性效果。浏览器对 table 元素的 sticky 支持本就受限，很多情况下 thead 即使写了 position: sticky 也完全不生效。
- 必须给
thead > tr > th或thead > tr > td单独设position: sticky，而不是只设在thead上 -
top值不能为 0（尤其在有滚动容器时），建议用top: 0配合外层容器overflow-y: auto - 确保父容器（比如包裹
table的div）设置了明确高度和overflow-y: auto，否则没有滚动上下文，sticky 就没意义 - Firefox 对
table内 sticky 的支持比 Chrome 更差，某些版本下th必须显式设background-color才能触发渲染
table + sticky 实现的最小可行写法
不用框架、不依赖 JS，纯 CSS 能跑通的关键是绕开 thead 直接操作单元格，并控制好层叠和背景。
- 给包裹
table的容器加：max-height: 400px; overflow-y: auto; - 给
th加：position: sticky; top: 0; background: white; z-index: 1; - 必须设
background，否则滚动时内容会透出（尤其 Safari） - 避免在
th上用border-collapse: collapse外的边框模型，容易导致 sticky 错位
div.table-container {
max-height: 300px;
overflow-y: auto;
}
table {
width: 100%;
border-collapse: collapse;
}
th {
position: sticky;
top: 0;
background: #fff;
z-index: 1;
border: 1px solid #ccc;
}
移动端或复杂表头下的兼容性陷阱
在 iOS Safari 或 Android WebView 中，position: sticky 在 table 内部表现极不稳定，常见现象是表头闪动、卡住不动、或只粘住第一列。
- iOS 15.4+ 才开始较稳定支持
th级 sticky，低版本需降级为 JS 滚动监听 +transform: translateY() - 如果表头用了
colspan或rowspan，sticky 会失效——浏览器无法计算合并单元格的粘性锚点 - 开启硬件加速（如加
will-change: transform）可能反而引发重绘异常，不建议乱加 - 暗色模式下，
background: white可能和主题冲突，应改用background: Canvas;或通过@media (prefers-color-scheme: dark)覆盖
什么时候该放弃 sticky，转用 JS 方案
当出现以下任一情况时，CSS sticky 已经不可靠，硬撑只会浪费调试时间：
立即学习“前端免费学习笔记（深入）”；
- 需要支持 iOS 14 或 Android 10 以下系统
- 表格带固定列（
left: 0同时要top: 0） - 表头高度不固定（比如文字折行、动态字体大小）
- 使用了第三方表格组件（如
ant-design或ag-Grid），它们内部已接管滚动逻辑，外部 sticky 会被覆盖
这时候直接上 IntersectionObserver 监听表头进入视口，或者用 scroll 事件 + getBoundingClientRect() 判断位置，比修 sticky 兼容性更快更稳。
