用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 直接失效。
- 必须给包裹
<table>的元素设max-height+overflow-y: auto（不能是visible或hidden） - 常见错误：只给
<table>设height和overflow—— 表格本身不产生滚动上下文，sticky不触发 - 别在祖先链任意一层加
transform、filter、will-change，这些会创建新层叠上下文并阻断sticky
必须给每个 <th> 单独加 sticky 和 z-index
<thead> 是语义容器，浏览器不把它当作 sticky 的作用目标；真正要“粘住”的是每个 <th> 单元格。只给 <thead> 加 sticky top-0 是无效的。
- 每个
<th>都要显式加position: sticky+top: 0（或 Tailwind 的sticky top-0） -
<th>必须有明确的background-color（如#fff），不能是transparent或未声明 -
z-index至少为1，推荐10起步；Safari 下建议用z-50避免闪动 - 加
border-bottom: 1px solid #ddd，否则表头和第一行数据之间容易视觉断裂
列宽必须一致，否则表头和内容错位
即使 sticky 生效，常见问题是表头列宽和 <tbody> 内容列宽不一致，导致错位——这不是 sticky 问题，而是表格渲染机制导致的。
立即学习“前端免费学习笔记（深入）”；
- 必须用
table-layout: fixed（Tailwind 对应table-fixed） - 给每个
<th>和对应<td>设相同宽度（如w-32、min-w-[120px]） - 长文本溢出时加
whitespace-nowrap或truncate，避免换行撑开列宽 - 不要依赖
<colgroup>，Tailwind 中它无法响应式控制
IE11 及更旧浏览器不支持，别强塞 polyfill
position: sticky 在 IE 全系都不支持，包括 IE11。强行用 JS 模拟容易引入滚动抖动、重排性能问题或列宽不同步 bug。
- 检测
CSS.supports('position', 'sticky')，不支持时直接展示无固定表头的普通表格 - 结构级降级更可靠：把
<thead>和<tbody>拆成两个独立<table>，再用 JS 同步列宽（仅在必要时） - 移动端 Safari 15.4 以下对
sticky更苛刻：缺少min-height、z-index不显式声明、或地址栏缩放抖动，都会让表头回退成static
最容易被忽略的是：粘性定位参考的是「最近的有滚动机制的祖先」，不是视口；而这个祖先一旦被 transform 或 overflow-x: hidden 干扰，整个机制就静默失效——它不会报错，只是不工作。
