CSS粘性定位如何实现表格表头固定

用position: sticky固定表头是最轻量免JS方案，但需同时满足三个硬性条件：父容器设max-height和overflow-y:auto创建滚动上下文；祖先链无transform/filter/will-change；每个th必须显式设background-color、z-index≥1及top:0。

直接结论：用 position: sticky 固定表头是当前最轻量、免 JS、兼容性足够（Chrome 56+ / Firefox 59+ / Safari 14.1+ / Edge 79+）的方案，但不是写上 top: 0 就能生效——它依赖三个硬性条件，缺一不可。

父容器必须提供滚动上下文

表头不会自己“动”，它靠父容器滚动时触发粘性行为。如果表格外面没包裹可滚动容器，position: sticky 直接失效。

1. 必须给包裹 <table> 的元素设 max-height + overflow-y: auto（不能是 visible 或 hidden）
2. 常见错误：只给 <table> 设 height 和 overflow —— 表格本身不产生滚动上下文，sticky 不触发
3. 别在祖先链任意一层加 transform、filter、will-change，这些会创建新层叠上下文并阻断 sticky

必须给每个 <th> 单独加 sticky 和 z-index

<thead> 是语义容器，浏览器不把它当作 sticky 的作用目标；真正要“粘住”的是每个 <th> 单元格。只给 <thead> 加 sticky top-0 是无效的。

1. 每个 <th> 都要显式加 position: sticky + top: 0（或 Tailwind 的 sticky top-0）
2. <th> 必须有明确的 background-color（如 #fff），不能是 transparent 或未声明
3. z-index 至少为 1，推荐 10 起步；Safari 下建议用 z-50 避免闪动
4. 加 border-bottom: 1px solid #ddd，否则表头和第一行数据之间容易视觉断裂

列宽必须一致，否则表头和内容错位

即使 sticky 生效，常见问题是表头列宽和 <tbody> 内容列宽不一致，导致错位——这不是 sticky 问题，而是表格渲染机制导致的。

1. 必须用 table-layout: fixed（Tailwind 对应 table-fixed）
2. 给每个 <th> 和对应 <td> 设相同宽度（如 w-32、min-w-[120px]）
3. 长文本溢出时加 whitespace-nowrap 或 truncate，避免换行撑开列宽
4. 不要依赖 <colgroup>，Tailwind 中它无法响应式控制

IE11 及更旧浏览器不支持，别强塞 polyfill

position: sticky 在 IE 全系都不支持，包括 IE11。强行用 JS 模拟容易引入滚动抖动、重排性能问题或列宽不同步 bug。

1. 检测 CSS.supports('position', 'sticky')，不支持时直接展示无固定表头的普通表格
2. 结构级降级更可靠：把 <thead> 和 <tbody> 拆成两个独立 <table>，再用 JS 同步列宽（仅在必要时）
3. 移动端 Safari 15.4 以下对 sticky 更苛刻：缺少 min-height、z-index 不显式声明、或地址栏缩放抖动，都会让表头回退成 static

最容易被忽略的是：粘性定位参考的是「最近的有滚动机制的祖先」，不是视口；而这个祖先一旦被 transform 或 overflow-x: hidden 干扰，整个机制就静默失效——它不会报错，只是不工作。