原生表格中设position: sticky不吸顶，因不构成sticky定位容器；需改用div模拟结构，表头与滚动区同级、父容器设max-height和overflow-y: auto，并显式控制列宽与行高。
直接给 根本问题不在表头元素本身，而在它所处的渲染上下文。原生 放弃对原生表格结构的幻想，用最简、最可控的方式触发 sticky： 示例结构： 对应关键样式： 别给所有 关键约束： iOS Safari 15.2–15.3 存在严重 sticky bug：吸顶错位、卡顿、甚至触发后无法恢复。仅靠 真要覆盖这些版本，得用 JavaScript 降级： 移动端 touch 滚动下 sticky 可能有 1–2 帧延迟，加 最易被忽略的点：即使结构改成 div 模拟，只要 sticky 元素的**直接父容器**没同时满足 <thead> 或 <code><th> 加 <code>position: sticky 很大概率不生效——不是你写错了，而是浏览器压根没把它当“可粘”对象处理。为什么
<th> 设置了 <code>position: sticky 却不吸顶<table> 的 display 模型（<code>display: table）不构成 sticky 所需的定位容器，导致 <th> 找不到“最近的滚动锚点”。Chrome 99+ 仅对 <code><th> 和 <code><td> 支持 <code>top: 0，但 <tr> 和 <code><thead> 仍被忽略；Firefox 至今（2026 年）完全不支持表格单元格的 sticky 行为。<p>常见失效链路：</p>
<ul><li><code><table> 父容器没设 <code>max-height + overflow-y: auto，sticky 缺失滚动上下文body、框架路由容器、<div class="app">）设置了 <code>overflow: hidden、transform、filter 或 will-change，这些会创建新层叠上下文并截断 sticky 锚定链position 计算值是 static，说明浏览器已主动降级，不是漏写了 top
真正能跑通的最小 CSS 组合
<div class="thead-sticky">，不能嵌套在滚动容器内部<li>
<code>.thead-sticky 必须有：position: sticky、top: 0、z-index: 10、background: white（缺一不可）.thead-sticky 的**同级兄弟元素**，且它们共同父容器要设 max-height: 400px 和 overflow-y: auto
style="width: 150px"）或用 JS 同步——table-layout: fixed 在 div 布局中无效<div class="table-wrapper">
<div class="thead-sticky">
<div class="th" style="width: 150px">姓名</div>
<div class="th" style="width: 200px">邮箱</div>
</div>
<div class="tbody-scroll">
<div class="tr">
<div class="td" style="width: 150px">张三</div>
<div class="td" style="width: 200px">zhang@example.com</div>
</div>
</div>
</div>
.table-wrapper {
max-height: 400px;
overflow-y: auto;
}
.thead-sticky {
position: sticky;
top: 0;
z-index: 10;
background: white;
display: flex;
}
.th {
flex: 0 0 150px; /* 与 td 宽度严格一致 */
}
.tbody-scroll {
/* 不设 overflow，由 .table-wrapper 控制 */
}
多行表头怎么接力吸顶
<tr> 都设 <code>top: 0——它们会堆在顶部打架；也别只给第一行设——第二、三行滚动后就消失。真实做法是按 DOM 顺序和视觉层级逐行设置不同 top 值：
top: 0
top: 48px（假设首行高 48px）top: 96px
display: flex 或 display: grid 的直接子项（部分浏览器下会干扰锚定）grid-template-rows: 48px 48px 48px），不能靠内容撑开，否则后续行的 top 偏移会错乱colspan/rowspan ——合并单元格的 DOM 结构和视觉网格已脱钩，无法与 sticky 协同iOS Safari 和旧版浏览器的兼容性坑
@supports (position: sticky) 检测无法识别该问题。
scroll 或更优的 IntersectionObserver，动态切换 .is-stuck 类position: fixed，必须同步给紧邻的 tbody 加 margin-top 补偿高度，否则内容会上蹿scroll 事件频繁触发会导致性能抖动，建议节流或改用 requestAnimationFrame 批量判断will-change: transform 到 th 可缓解（但别滥用，会引发内存泄漏）。max-height + overflow-y: auto，或者该父容器带 transform，sticky 就彻底静默——不是“偶尔失效”，而是从不触发。
