position: sticky 失效主因是滚动上下文被破坏，需确保 table 容器有高度限制、th 单独设 sticky/top/z-index/背景色，且用 table-layout: fixed 控列宽。

为什么 position: sticky 加了 top: 0 却不冻结？

不是浏览器不支持，而是 sticky 的滚动上下文被悄悄破坏了。最常踩的坑是：把样式直接加在 <thead> 上，或让表格父容器用了 <code>overflow: hidden、transform、will-change ——这些都会创建新的层叠上下文，导致 sticky 失效。

真正起作用的是每个 <th> 元素自身，必须单独加 <code>position: sticky; top: 0;，且要满足三个硬条件：

• <table> 必须包裹在有明确高度限制的 <code><div class="table-container"> 中，例如 <code>max-height: 500px; overflow-y: auto;
• <th> 必须带 <code>background-color（哪怕只是 #fff），否则滚动时文字会被下方 <td> 内容透出或遮盖 <li><code><th> 必须设 <code>z-index: 10 或更高，否则默认层级下会被 <tbody> 压住 <h3>怎么避免表头和数据列错位？</h3> <p>90% 的错位问题出在列宽没控住。浏览器在 <code>table-layout: auto 下会动态计算宽度，而 sticky 的定位基准会漂移，导致表头“悬空”或“偏移”。

  稳妥做法是强制布局并显式声明宽度：

  • 给 <table> 加 <code>table-layout: fixed; width: 100%
  • 用 <colgroup></colgroup> 统一定义列宽，比如 <col width="120"> <col width="200">，首列优先用像素值
  • 所有 <th> 和对应列的 <code><td> 都设相同 <code>width 或 min-width，别混用 % 和 px
  • 禁用 border-collapse: collapse，改用 border-spacing: 0 + 单独边框，否则 sticky 边界计算异常

  编辑器里写内联样式还是外链 CSS？

  HTML 编辑器（比如 TinyMCE、CKEditor 或自研富文本）通常只允许用户贴 HTML 片段，不支持外链 CSS 文件。所以得靠内联样式保底生效：

  
  html-deploy
  使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。
  下载
  • 每个 <th> 都加完整样式：<code>style="position: sticky; top: 0; background: #f8f9fa; z-index: 10;"
  • 整个表格外必须手动套一层 <div style="max-height: 400px; overflow-y: auto;"> <li>别依赖编辑器自动补 <code><thead> ——有些编辑器会删掉语义标签，务必检查生成 HTML 是否含 <code><thead><tr><th> 结构 <li>如果编辑器过滤 <code>style 属性，就得换方案：提前注入全局 CSS，并约定 class 名如 sticky-header，再由编辑器保留该 class

  IE11 或老 Safari 怎么降级？

  position: sticky 在 IE 完全不可用，Safari ≤13.1 支持极差。此时不能只靠 CSS fallback，必须结构分离：

  • 把 <thead> 提到表格外，单独包成固定高度的 <code><div class="fixed-header"> <li><code><tbody> 包进另一个 <code><div class="scroll-body">，设 <code>overflow-y: auto
  • 用 JS 同步滚动：监听 scrollBody.addEventListener('scroll', () => { fixedHeader.scrollLeft = scrollBody.scrollLeft })
  • 关键细节：必须节流滚动事件；resize 后重读每行 offsetHeight 并同步行高，否则错行；首列宽度要用 getBoundingClientRect().width 动态赋给 <th> <p>真正难的从来不是那行 <code>position: sticky，而是列宽、容器高度、z-index、背景色、滚动上下文，漏掉任意一个，表头就可能半透明、错位、或干脆不动。