必须用 border-collapse: collapse。因为 collapse 模式使边框合并，确保 sticky 的 top: 0 精准锚定容器顶部；separate 模式下各 th 的独立边框、内边距和间距会导致锚点浮动，引发 safari/chrome 中表头“粘住但下掉像素”等问题。

为什么设置 border-collapse: separate 会让 sticky 表头更难生效

这不是修复手段，而是常见误操作。原生 <thead> 本身就不支持 <code>position: sticky，改 border-collapse 不仅不能激活它，反而可能加剧错位或渲染异常——因为 separate 模式会放大单元格边框间距，干扰 top: 0 的锚点计算，尤其在多列、不同字号或缩放场景下。

真正起作用的是把粘性逻辑落到 <th> 上，并确保它们的渲染上下文干净。浏览器对 <code>border-collapse: collapse 的处理更稳定，配合 table-layout: fixed 可避免列宽重排导致的 sticky 跳动。

<th> 上设 <code>position: sticky 时，border-collapse 应该用哪个值

必须用 border-collapse: collapse。原因很直接：

• collapse 让表格边框合并成一条线，sticky 元素的 top 锚点能对齐到容器顶部边界，不会被额外边框撑开偏移
• separate 下每个 <th> 都有独立 border + padding + spacing，<code>top: 0 实际锚定位置会浮动，Safari 和旧版 Chrome 中常表现为“粘住但往下掉几个像素”
• 所有稳定案例（包括 MDN 官方示例）都默认启用 collapse；若你用了 UI 框架（如 Ant Design），检查它是否悄悄覆盖了该值

哪些 border-collapse 相关样式会悄悄破坏 sticky 效果

这些写法看着合理，实则高危：


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载
• 给 <table> 设 <code>border-collapse: separate 同时又设 border-spacing: 0 → Firefox 仍按 separate 渲染，sticky 锚点失效
• 在 <th> 上单独加 <code>border: none 或 outline: 0 → 破坏边框模型一致性，Chrome 可能跳过粘性重绘
• 外层容器用了 transform: scale(0.95) → 不仅阻断 sticky，还会让 border-collapse 计算失准，表头列宽突然错乱

绕过 border-collapse 争议的最简落地写法

放弃原生 <thead>，用语义等效的 <code><div> 结构，彻底脱离表格边框模型干扰： <pre class="brush:php;toolbar:false;">&lt;div class=&quot;table-container&quot; style=&quot;max-height: 400px; overflow-y: auto;&quot;&gt; &lt;div class=&quot;table&quot; style=&quot;display: table; width: 100%; border-collapse: collapse;&quot;&gt; &lt;div class=&quot;thead&quot; style=&quot;display: table-header-group;&quot;&gt; &lt;div class=&quot;tr&quot; style=&quot;display: table-row;&quot;&gt; &lt;div class=&quot;th&quot; style=&quot;display: table-cell; position: sticky; top: 0; background: white; z-index: 10;&quot;&gt;姓名&lt;/div&gt; &lt;div class=&quot;th&quot; style=&quot;display: table-cell; position: sticky; top: 0; background: white; z-index: 10;&quot;&gt;邮箱&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;tbody&quot; style=&quot;display: table-row-group;&quot;&gt; &lt;div class=&quot;tr&quot; style=&quot;display: table-row;&quot;&gt; &lt;div class=&quot;td&quot; style=&quot;display: table-cell;&quot;&gt;张三&lt;/div&gt; &lt;div class=&quot;td&quot; style=&quot;display: table-cell;&quot;&gt;zhang@example.com&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</pre> <p>这个结构里，<code>border-collapse 只作用于视觉边框，不影响 sticky 的定位逻辑；z-index: 10 和 background 是防透出硬要求，iOS Safari 15.4+ 才真正稳定支持。

真正容易被忽略的点是：哪怕用了这套结构，只要父级弹窗组件带 transform 或 will-change，sticky 就会参考错容器——得手动把 .table-container 提升为那个动画元素的直接子节点。