position: sticky固定表头需满足四个条件：包裹容器或tbody设max-height和overflow-y以创建滚动上下文；table-layout: fixed配合显式列宽防错位；th必须设z-index和背景色防遮挡；注意top: 0参照最近可滚动祖先，避免中间祖先overflow:hidden截断。
position: sticky 固定表头必须配 max-height 和 overflow-y
直接给 <thead> 加 <code>position: sticky; top: 0 不会生效，除非它的滚动上下文存在。关键不是表格本身，而是包裹它的容器或 <tbody> 必须形成滚动边界。
<p>常见错误现象：<code><thead> 依然随内容一起滚动，或者只在顶部闪一下就消失。
<ul><li><code><tbody> 上设 <code>max-height: 300px; overflow-y: auto;（不能只设 overflow-y，必须有高度约束）
<table> 包进一个 <code><div style="max-height: 300px; overflow-y: auto;">，此时 <code><thead> 的 <code>top: 0 才相对于这个 div 生效
overflow: hidden 或 overflow: clip，它们会截断 sticky 行为列宽错位？table-layout: fixed + 显式 width 是刚需
滚动时表头和数据列对不齐，90% 是因为浏览器自动计算列宽。默认 table-layout: auto 下，<thead> 和 <code><tbody> 的列宽可能各自独立计算，尤其当内容长度差异大时。
<ul><li>给 <code><table> 加 <code>table-layout: fixed; width: 100%
<th> 和对应位置的 <code><td> 设置相同宽度，比如 <code>width: 120px 或用 <colgroup></colgroup> 统一控制
min-width 或 flex 混合布局——表格内部不认 flex 属性，会导致宽度失效z-index 和 background-color 不是可选项，是必填项
没加 z-index 和背景色时，滚动过程中表头文字会被下方 <tr> 的边框或内容遮挡，尤其在高密度表格中非常明显。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul><li><code><th> 必须设 <code>z-index: 10（数值大于 tbody 内容的默认层叠顺序）
background-color 要显式声明，推荐 #fff 或浅灰，不能依赖透明或父级背景border-collapse: collapse，记得给 <th> 单独加 <code>border-bottom，否则表头底边会“断开”
IE11 及更老浏览器不支持 sticky？降级方案要提前准备
2026 年仍有部分内网管理系统要求兼容 IE11，而它完全忽略 position: sticky。这时不能靠 polyfill 补救，得换结构。
- 把
<thead> 提到表格外，变成独立的 <code><table class="header-only"> <li>用 <code>table-layout: fixed+ 预设列宽，让两个表格列宽强制一致 - 监听
scroll事件，动态同步两个表格的scrollLeft（仅需一行 JS） - 注意：不要改
<tbody> 的 <code>display: block—— 这会让语义丢失、屏幕阅读器失效，现代方案里已淘汰 实际最易被忽略的点是：**top: 0的参照物不是视口，而是最近的「有滚动能力」的祖先容器**。很多人在表格外又套了多层<div>，其中某一层恰好带了 <code>overflow: hidden，结果 sticky 直接失效，排查起来非常隐蔽。
