position: sticky 实现表格粘性表头需满足结构、容器和环境三重约束：父容器须设 max-height 和 overflow-y: auto（禁用 hidden/scroll），不可有 transform/filter；thead 不能设 display: block；须用 table-layout: fixed 并显式设列宽；IE11 等旧浏览器需降级为 div 模拟或使用框架组件。
position: sticky 是实现 HTML 表格粘性表头最轻量、最直接的方式，但不是加了 top: 0 就一定生效——它对结构、父容器和浏览器环境都有明确约束。
为什么 thead th 加了 position: sticky; top: 0 却不粘？
根本原因通常是父容器“拦住了”粘性行为。sticky 元素必须在滚动上下文中才能触发，而这个上下文需要由**最近的、有滚动能力的祖先容器**提供。
- 外层
<div> 必须设置 <code>max-height和overflow-y: auto（不能是hidden或scroll） - 该
<div> 不能有 <code>transform、filter或will-change，否则会创建新的层叠上下文并截断 sticky <thead> 本身不能设 <code>display: block；要让th生效，样式必须直接加在th或tr上，例如：.table-fixed thead th { position: sticky; top: 0; background: white; z-index: 10; }- 若表格嵌套在
flex或grid容器中，需确认该容器未限制子项的定位行为 - 为每列的
th和td显式设置相同宽度，例如：th:nth-child(1), td:nth-child(1) { width: 120px; } - 避免用
%或fr混合单位；统一用px或ch更可控 - 如果列数多且宽度不均，可在 JS 中读取第一行
td的offsetWidth，再批量写入th的style.width
如何保证列宽对齐不崩塌？
当 <tbody> 滚动而 <code><thead> 固定时，浏览器可能因重排机制导致列宽错位——尤其在动态内容或字体加载后。<ul>
<li>强制启用固定表格布局：<code>table { table-layout: fixed; width: 100%; }
IE11 或旧版 Safari 怎么兼容？
position: sticky 在 IE11 完全不支持，Safari ≤ 15.4 也有部分 bug（如 z-index 失效、top 偏移不准）。这时不能靠 polyfill “修”，得换策略。
- 放弃原生
table结构，改用三个独立块：<div class="table-head"> + <code><div class="table-body"> + <code><div class="table-foot">，各自控制滚动与定位 <li>用 JS 监听 <code>scroll，计算table-head的transform: translateY()或top值，模拟粘性（注意节流） - 若项目已用框架（如 React/Vue），优先选社区验证过的表格组件（如
react-table+useSticky插件），它们内部已处理兼容路径 - 不要尝试
position: fixed+ 手动同步滚动，列宽和响应式会立刻失控
真正难的不是写那几行 sticky 样式，而是判断当前表格是否处于一个“能被 sticky 正确识别”的渲染上下文中——有时候删掉一行 overflow: hidden 就通了，有时候加个 transform: translateZ(0) 反而坏了。动手前先用浏览器开发者工具检查 sticky 元素的“Sticky constraint”是否被标记为 active。
