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