position: sticky 失效主因是滚动上下文被破坏，需确保 table 容器有高度限制、th 单独设 sticky/top/z-index/背景色，且用 table-layout: fixed 控列宽。
为什么 position: sticky 加了 top: 0 却不冻结？
不是浏览器不支持，而是 sticky 的滚动上下文被悄悄破坏了。最常踩的坑是：把样式直接加在 <thead> 上，或让表格父容器用了 overflow: hidden、transform、will-change ——这些都会创建新的层叠上下文，导致 sticky 失效。
真正起作用的是每个 <th> 元素自身，必须单独加 position: sticky; top: 0;，且要满足三个硬条件：
-
<table>必须包裹在有明确高度限制的<div class="table-container">中，例如max-height: 500px; overflow-y: auto; -
<th>必须带background-color（哪怕只是#fff），否则滚动时文字会被下方<td>内容透出或遮盖 -
<th>必须设z-index: 10或更高，否则默认层级下会被<tbody>压住
怎么避免表头和数据列错位？
90% 的错位问题出在列宽没控住。浏览器在 table-layout: auto 下会动态计算宽度，而 sticky 的定位基准会漂移，导致表头“悬空”或“偏移”。
稳妥做法是强制布局并显式声明宽度：
立即学习“前端免费学习笔记（深入）”；
- 给
<table>加table-layout: fixed; width: 100% - 用
<colgroup>统一定义列宽，比如<col width="120"><col width="200">，首列优先用像素值 - 所有
<th>和对应列的<td>都设相同width或min-width，别混用%和px - 禁用
border-collapse: collapse，改用border-spacing: 0+ 单独边框，否则sticky边界计算异常
编辑器里写内联样式还是外链 CSS？
HTML 编辑器（比如 TinyMCE、CKEditor 或自研富文本）通常只允许用户贴 HTML 片段，不支持外链 CSS 文件。所以得靠内联样式保底生效：
- 每个
<th>都加完整样式：style="position: sticky; top: 0; background: #f8f9fa; z-index: 10;" - 整个表格外必须手动套一层
<div style="max-height: 400px; overflow-y: auto;"> - 别依赖编辑器自动补
<thead>——有些编辑器会删掉语义标签，务必检查生成 HTML 是否含<thead><tr><th>结构 - 如果编辑器过滤
style属性，就得换方案：提前注入全局 CSS，并约定 class 名如sticky-header，再由编辑器保留该 class
IE11 或老 Safari 怎么降级？
position: sticky 在 IE 完全不可用，Safari ≤13.1 支持极差。此时不能只靠 CSS fallback，必须结构分离：
- 把
<thead>提到表格外，单独包成固定高度的<div class="fixed-header"> -
<tbody>包进另一个<div class="scroll-body">，设overflow-y: auto - 用 JS 同步滚动：监听
scrollBody.addEventListener('scroll', () => { fixedHeader.scrollLeft = scrollBody.scrollLeft }) - 关键细节：必须节流滚动事件；resize 后重读每行
offsetHeight并同步行高，否则错行；首列宽度要用getBoundingClientRect().width动态赋给<th>
真正难的从来不是那行 position: sticky，而是列宽、容器高度、z-index、背景色、滚动上下文，漏掉任意一个，表头就可能半透明、错位、或干脆不动。
