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