position: sticky 表头固定需同时满足四个条件：th 设 sticky 和 top: 0；tr 不破坏表格 display；table 有明确高度+overflow-y: auto；th 有 background 和 z-index ≥ 1。
position: sticky 是当前最主流、最轻量的 HTML 表头固定方案，但它不是开箱即用的魔法——必须满足特定 DOM 结构和 CSS 约束才能生效。直接给 <th> 加 <code>position: sticky 却没效果？大概率是父级滚动容器缺失或层级错乱。
为什么 <thead> 本身不固定？<p><code><thead> 只是语义标签，浏览器不会自动赋予它粘性行为。它和 <code><tbody> 在默认渲染流中属于同一表格块，滚动时整张表一起动。真正起作用的是 CSS 的定位机制，而非 HTML 标签名。常见误解包括：<br>• 把 <code>position: fixed 直接加在 <th> 上 → 脱离表格布局，列宽崩塌、对齐失效<br>• 只设 <code>top: 0 不设 z-index → 滚动时被后续 <tr> 盖住<br>• 忘记限制 <code><tbody> 高度和溢出 → 没有滚动边界，<code>sticky 失去锚点
position: sticky 的最小可行配置
position: sticky 的最小可行配置要让 <th> 真正“粘”住，需同时满足四个条件：<br>• <code><th> 必须设 <code>position: sticky 和 top: 0
• <th> 所在的 <code><tr> 不能有 <code>display: block 或其他破坏表格 display 值的样式
• <tbody> 的直接父容器（通常是 <code><table>）必须有明确高度限制 + <code>overflow-y: auto
• <th> 必须有显式 <code>background（否则滚动时底色透出难看）和足够 z-index（建议 ≥ 1）
示例关键片段：
| 姓名 | 城市 |
|---|---|
| 张三 | 北京 |
IE11 及更老浏览器怎么兜底？
IE 完全不支持 position: sticky，强行启用会降级为普通滚动。务实做法是分层兼容：
• 现代浏览器（Chrome 51+、Firefox 59+、Safari 6.1+）走 sticky 路线，零 JS、语义完整
• IE11/Edge Legacy 则切换为「双表结构」：一个只含 <thead> 的 <code><table> 放顶部，另一个只含 <code><tbody> 的 <code><table> 包在 <code>overflow-y: auto 的 <div> 里<br>• 两者列宽对齐靠 <code>table-layout: fixed + 显式 <col> 或 JS 同步（监听 resize 事件重算）
• 注意：双表方案下，<th> 和 <code><td> 的 padding/border 必须严格一致，否则视觉错位<h3>大表性能与可访问性陷阱</h3>
<p>长表格一旦带固定表头，容易在两个地方翻车：<br>• 渲染卡顿：如果 <code><tbody> 有上千行，即使用了 <code>sticky，浏览器仍要 layout 全部 DOM。建议结合虚拟滚动（如 react-window 或原生 IntersectionObserver）只渲染可视区域行
• 屏幕阅读器失焦：部分旧读屏软件无法正确识别 sticky 表头与数据行的关联。确保每列 <th> 有 <code>scope="col"，且 <tbody> 中每行 <code><td> 通过 <code>headers 属性显式指向对应 <th id>
<br>• 移动端 touch 滚动不流畅：加 <code>-webkit-overflow-scrolling: touch 到滚动容器，但注意 Safari 15.4+ 已弃用该属性，优先用标准 scroll-behavior: smooth 或忽略
真正难的不是让表头“看起来不动”，而是让它在各种尺寸、各种设备、各种辅助技术下都保持语义准确、视觉对齐、交互稳定。多数人卡在 top: 0 加了但没生效，其实问题不在那一行 CSS，而在它上面三层的容器有没有滚动上下文。
