直接给 thead 加 sticky 无效，因浏览器不将 thead 视为 sticky 作用目标；真正需设置的是每个 th，且必须满足三条件：容器设 overflow-x/auto 或 max-height+overflow-y、thead 结构完整、th 保持 display: table-cell 并设背景色和 z-index。
为什么直接给 thead 加 sticky 没反应
因为浏览器根本不把 thead 当作 sticky 的作用目标——它只是语义容器，不参与定位计算。真正要“粘住”的是每个 th 单元格。只写 thead { position: sticky; top: 0; } 是无效的，开发者工具里样式显示生效，但滚动时完全没反应。
常见诱因还包括：table 的父容器设了 overflow: hidden 或 overflow: auto 但没给高度；祖先元素用了 transform 或 filter；th 被强制设成 display: flex（Firefox 直接拒掉 sticky）。
必须满足的三个硬性条件
缺一不可，否则 sticky 根本不会启动：
- 包裹表格的容器（比如
<div class="table-container">）必须设overflow-x: auto（横向滚动必需）或max-height: 400px; overflow-y: auto（纵向滚动必需） -
thead必须真实存在，不能用div模拟；内部要有tr和th，结构完整 - 每个
th保持display: table-cell（别覆盖），显式设background-color（否则滚动时透出下面内容），并加z-index: 10（防止被tbody盖住）
th 上怎么写 sticky 才有效
不是写在 thead，而是逐个给 th 加：
立即学习“前端免费学习笔记（深入）”；
th { position: sticky; top: 0; background: white; z-index: 10; }
多级表头时，top 值要按行高叠加：
- 第一级表头（最顶行）：
top: 0; z-index: 20 - 第二级表头（比如合并单元格下的子列）：
top: 36px（假设第一行高 36px），z-index: 15 - 首列固定：
th:first-child { left: 0; z-index: 25; } - 左上角交点：
thead th:first-child { top: 0; left: 0; z-index: 30; }
注意：所有 sticky 元素都必须有背景色，否则滚动时下方文字会透上来。
列宽错位、移动端闪动这些坑怎么绕开
即使 sticky 生效，th 和 td 列宽不一致会导致明显错位——这不是 sticky 的问题，而是表格自动计算列宽导致的。
解决方式很实在：
- 用
table-layout: fixed（Tailwind 对应table-fixed），禁用浏览器自适应分配 - 给每个
th和对应列的td显式设宽度，比如w-32或min-w-[120px] - 长文本加
whitespace-nowrap或truncate，避免换行撑开列 - iOS Safari 15.3 及更早版本对 sticky 触发极苛刻：必须用
min-h-[400px]而非h-[400px]，z-index必须显式声明且 ≥ 50
复杂场景下，比如 Excel 式首行+首列双向冻结，纯 CSS sticky 已逼近能力边界——top 和 left 同时生效依赖两个独立滚动上下文，此时建议改用 Grid 拆分结构，或接受 JS 方案兜底。
