thead th 设置 position: sticky 不吸顶最常见原因是父容器未提供滚动上下文，如 table 缺少 height/overflow-y，或其祖先设置了 overflow: hidden、transform 等阻断 sticky 的属性。
直接给 thead th 加 position: sticky 并不总能生效——它依赖滚动上下文、层叠上下文和浏览器实际支持情况，不是写上就吸顶。
为什么 thead th 设置了 position: sticky 却不吸顶
最常见原因是父容器“拦住了”sticky行为。浏览器要求 sticky 元素必须有一个**可滚动的最近祖先容器**，而 <table> 默认没有滚动能力，<thead> 的父级（即 <table>）又通常没设 height 和 overflow-y，导致 sticky 退化为 static。
- 检查
<table>的直接父容器（比如一个<div class="table-wrapper">）是否设置了max-height或height+overflow-y: auto - 确认该父容器没设
overflow: hidden、transform、filter或will-change—— 这些会创建新层叠上下文，让 sticky 失效 -
top值必须显式设置（如top: 0），不能是auto或留空 - 避免在
<table>、<thead>或display: table-*元素上直接设 sticky；应作用于thead th或thead tr
position: sticky 在表格中生效的最小必要 CSS
以下代码是真正能跑通的最小集合，不含冗余样式：
/* 确保 table 有滚动容器 */
.table-wrapper {
max-height: 400px;
overflow-y: auto;
}
<p>/<em> 表头单元格吸顶 </em>/
thead th {
position: sticky;
top: 0;
background: white;
z-index: 10;
}-
z-index必须设，否则可能被后续行遮挡 -
background推荐显式设置，防止滚动时下方内容透出 - 不要给
thead或table设transform，哪怕只是translateZ(0) - 若有多行表头（如分组标题），第二行可用
top: 42px（假设首行高 42px），实现层叠吸顶
iOS Safari 和旧版浏览器的兼容性坑
iOS Safari 15.2–15.3 存在严重 sticky bug：吸顶错位、卡顿、甚至触发后无法恢复。仅靠 @supports (position: sticky) 检测无法识别该问题。
立即学习“前端免费学习笔记（深入）”；
- 真要覆盖这些版本，得用 JavaScript 降级：监听
scroll或更优的IntersectionObserver，动态切换.is-stuck类 - 降级时别直接切
position: fixed，必须同步给紧邻的tbody加margin-top补偿高度，否则内容会上蹿 - IE 完全不支持 sticky，必须 JS 兜底；但注意 scroll 事件频繁触发会导致性能抖动，建议节流或改用
requestAnimationFrame批量判断 - 移动端 touch 滚动下 sticky 可能有 1–2 帧延迟，加
will-change: transform到th可缓解（但别滥用，会影响内存）
为什么不用 position: fixed 直接替代
position: fixed 看似简单，但它会让表头完全脱离文档流，带来三个硬伤：
- 宽度不再跟随列宽自动对齐，需手动用 JS 同步
th和td的offsetWidth，且响应式重排时极易错位 - 固定后无法响应
table的width: 100%或minmax()等弹性布局 - 如果表格在 modal 或横向滚动容器里，
fixed会以视口为基准定位，而不是父容器，导致偏移 - sticky 则天然保留在文档流中，列宽、响应式、嵌套容器都无需额外干预
真正容易被忽略的是：sticky 的“吸附范围”由最近的滚动祖先决定，而不是整个页面。如果你把表格放进一个 height: 300px; overflow-y: auto 的 div 里，那表头只会在该 div 内吸顶——超出这个区域，它就恢复滚动。这点和 fixed 的全局性有本质区别。
