position: sticky 在 table 元素上失效的根本原因是浏览器对表格元素的 sticky 支持有硬性限制，需同时满足 border-collapse: separate、显式 top 值、外层容器有高度和 overflow-y: auto 三个条件，且 safari ≤15.4 和 ie 不支持。
直接给 <thead> 或 <code><th> 加 <code>position: sticky 大概率失效——不是写法错，是浏览器对表格元素的 sticky 支持有硬性限制，且默认渲染模型会拦截定位行为。
为什么 position: sticky 在 <th> 上不生效
<p>根本原因不是 CSS 写错了，而是 sticky 定位需要满足三个隐性条件同时成立：</p>
<ul><li><code><table> 必须设 <code>border-collapse: separate（默认是 collapse，会禁用 sticky）
<th> 必须显式设置 <code>top 值（如 top: 0），且其祖先不能有 overflow: hidden、transform 或 filter
<table> 的外层容器必须有明确高度 + <code>overflow-y: auto，否则没有滚动上下文，sticky 就没触发机会
<tbody> 不能直接设 <code>overflow-y: auto
<tbody> 是表格内部渲染节点，不接受 <code>overflow 属性。强行加不会报错，但完全无效。常见错误写法：
<tbody style="max-height: 300px; overflow-y: auto"> <p>正确做法只有两种：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a> <p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p> </div> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul><li>把整个 <code><table> 包进一个 <code><div style="max-height: 300px; overflow-y: auto">，再让 <code><th> 用 <code>sticky</code> 固定 <li>放弃原生 <code><tbody>，改用 <code>display: block</code> 的 <code><div class="tbody"> 模拟，但必须手动同步列宽（<code>table-layout: fixed</code> + 统一 <code>width</code> 或 <code>min-width</code>） <h3>兼容 Safari 和旧版浏览器的底线方案</h3> <p>Safari ≤ 15.4 对 <code><thead> 内 <code><th> 的 <code>sticky</code> 支持极差；IE 完全不支持。如果项目需覆盖这些环境，别试图打补丁： <ul><li>不要用 <code>display: block</code> 强转 <code><table> —— 会破坏边框合并、列对齐，右侧常多出一条竖线 <li>不要监听 <code>scroll</code> 动态改 <code>top</code> —— 滚动抖动明显，且 <code>getBoundingClientRect()</code> 在快速滚动时返回旧值</li> <li>务实选择：用 <code>div</code> + <code>grid</code> 重写表格结构，表头单独抽离为 <code>position: sticky</code> 的区块，列宽用 <code>minmax(120px, 1fr)</code> 控制</li> <p>最易被忽略的点：所有 <code><th> 必须设 <code>background-color</code> 和 <code>z-index</code>，否则滚动时内容会从表头下方透出来；<code>z-index</code> 不写或写 0 都不行，至少得是 1。</th></code></p> </table></code> </li></ul> </th></code> </thead></code></p> </div></code> </tbody></code> </li> </th></code> </div></code> </table></code> </li></ul> </tbody>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
