直接给 th 加 position: sticky 无效，因 table 默认 border-collapse: collapse 且不创建滚动边界；需外层容器设 overflow-y: auto、table 设 border-collapse: separate、th 设 top 值及 z-index 和背景色。
为什么直接给 th 加 position: sticky 没反应？
因为 position: sticky 需要一个有“滚动边界”的父容器，而默认的 table 元素不创建新的层叠上下文或块格式化上下文，且其内部渲染模型（table layout）会干扰 sticky 的计算。浏览器通常忽略对 th 直接设置的 sticky，除非它所在的行（tr）和表格（table）满足特定条件。
-
table必须设置border-collapse: separate（默认是collapse，会禁用 sticky） -
th必须指定top值（如top: 0），且其祖先不能有overflow: hidden或clip类样式 - 整个
table最好包裹在带overflow-y: auto的容器里，否则没有滚动行为，sticky 就没机会触发
正确写法：包裹容器 + 分离边框 + 显式 top
核心是三层结构：外层容器控制滚动，table 设置分离边框，th 设定粘性位置。下面是最小可行代码：
<div style="overflow-y: auto; max-height: 300px;">
<table style="border-collapse: separate; border-spacing: 0;">
<thead>
<tr>
<th style="position: sticky; top: 0; background: white; z-index: 10;">姓名</th>
<th style="position: sticky; top: 0; background: white; z-index: 10;">年龄</th>
<th style="position: sticky; top: 0; background: white; z-index: 10;">城市</th>
</tr>
</thead>
<tbody>
<tr><td>张三</td><td>28</td><td>北京</td></tr>
<tr><td>李四</td><td>32</td><td>上海</td></tr>
<!-- 更多行... -->
</tbody>
</table>
</div>注意：z-index 不可省略——否则内容滚动时可能盖住表头；background 也建议设，避免文字透出。
IE 和旧版 Safari 不支持？别硬扛，换方案
position: sticky 在 IE 完全不支持，在 Safari ≤ 15.4 中对 table 内部元素的支持极不稳定（尤其 th 嵌套在 thead 里时）。如果必须兼容这些环境：
立即学习“前端免费学习笔记（深入）”；
- 用 JavaScript 监听滚动，动态修改
thead的transform或top（但要注意重绘开销） - 拆成两个独立的
table：一个只放thead并固定定位，另一个放tbody并滚动，靠 JS 同步列宽（getBoundingClientRect()+style.width） - 直接用成熟库如
fixed-table-header或vue-virtual-scroll-list（如果项目已用 Vue）
为什么表头偶尔错位或抖动？
常见于列宽未锁定、字体加载延迟或缩放变化后未重排。根本原因是 sticky 元素依赖父容器尺寸计算，而 table 列宽默认是动态的。
- 给每列
th和对应td设置相同width（如width: 120px或min-width） - 避免在
th中使用white-space: nowrap+ 长文本，这会导致宽度突变 - 若用了 Web Font，等字体加载完成后再启用滚动容器（监听
document.fonts.load） - 移动端双指缩放后，sticky 可能失效——此时需监听
resize并强制重绘（el.style.transform = 'translateZ(0)'）
最麻烦的其实是 border-spacing 和 padding 的组合影响 sticky 边界计算，调的时候建议用 Chrome DevTools 的“Layers”面板看是否生成了独立合成层。
