position: sticky 固定表头需同时满足：父容器设 max-height 和 overflow-y: auto 创建滚动上下文；祖先链无 transform/filter/will-change；th 显式设 background-color 和 z-index≥1，并规范使用 thead。
直接结论：用 position: sticky 固定表头是当前最轻量、免 JS、兼容性足够（Chrome 56+ / Firefox 59+ / Safari 14.1+ / Edge 79+）的方案，但不是写上 top: 0 就能生效——它依赖三个硬性条件，缺一不可。
父容器必须提供滚动上下文
表头不会自己“动”，它靠父容器滚动时触发粘性行为。如果表格外面没包裹可滚动容器，position: sticky 直接失效。
- 必须给包裹
<table>的元素设max-height+overflow-y: auto（不能是visible或hidden） - 常见错误：只给
<table>设height和overflow—— 表格本身不产生滚动上下文，sticky不触发 - 不要在祖先链上任意一层加
transform、filter、will-change，这些会创建新的层叠上下文并阻断sticky
<th> 必须显式设置背景色和 z-index
滚动时，<th> 会叠在 <tbody> 上，但如果没有背景，文字会被下方 <td> 内容透出或遮盖；没有 z-index，则可能被其他元素压住。
-
background-color必须是明确值（如white、#fff），不能是transparent或未声明 -
z-index至少为1，推荐10起步，避免被其他浮动/定位元素覆盖 - 别漏掉
border-bottom（比如1px solid #ddd），否则表头和第一行数据之间容易视觉断裂
表格结构与样式必须规范
sticky 对 HTML 结构和 CSS 组合很敏感，稍有偏差就错位或失效。
立即学习“前端免费学习笔记（深入）”；
-
<thead>必须存在且包裹完整<tr><th>.../tr>，不能用<tr>直接写在<table>里 - 避免同时用
border-collapse: collapse和在<th>/<td>上单独设border—— 容易导致 sticky 区域宽度计算偏移 - 列宽不一致时（比如一列是短文本，一列是长 URL），加
table-layout: fixed+ 显式width（如th:nth-child(1) { width: 120px; }）才能保证表头和内容列对齐 -
<tr>不能设overflow: hidden，否则会剪裁 sticky 元素
IE11 及更旧浏览器怎么办
position: sticky 在 IE 全系都不支持，包括 IE11。如果项目仍需兼容，降级方案不是“加 polyfill”，而是结构级替换。
- 把
<thead>和<tbody>拆成两个独立<table>，用 JS 同步列宽（监听resize和scroll） - 或者用
position: absolute+ JS 动态计算top值，但要注意滚动性能（避免在scroll中重排） - 更现实的做法：检测
CSS.supports('position', 'sticky')，不支持时直接展示无固定表头的普通表格，而非强行降级引入 bug
真正容易被忽略的，是 <tr> 上那些看似无关的样式——比如一个 overflow: hidden 或 transform: translateZ(0)，就能让整行 <th> 失去粘性。验证时别只看是否“固定”，要拖动滚动条观察边缘对齐、文字遮盖、列宽一致性这三个点。
