position: sticky 是现代浏览器固定表头最轻量可靠的方式，但需满足父容器有滚动上下文、tr 无 overflow: hidden、th 显式设置 background-color 和 z-index 三个条件；ie11 及以下需降级为分离表头+js 同步列宽。

现代浏览器下，position: sticky 是最轻量、最可靠的方式，只要父容器有滚动上下文且 <th> 设置正确，一行 CSS 就能生效；旧版 IE（尤其是 IE11 及以下）不支持 <code>sticky，必须降级处理。

用 position: sticky 固定 <th> 的前提条件 <p>它不是写上就灵——<code>top: 0 要生效，必须满足三个硬性条件：

• <table> 或其任意祖先容器需设置 <code>max-height + overflow-y: auto（不能是 hidden 或 visible）
• <th> 的直接父元素（通常是 <code><tr>）不能有 <code>overflow: hidden 等阻断粘性行为的样式
• <th> 必须显式设置 <code>background-color 和 z-index（哪怕只是 z-index: 1），否则滚动时文字会被下方 <td> 盖住或透出底色 <p>推荐写法示例：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a> <p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p> </div> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <pre class="brush:php;toolbar:false;">&lt;div style=&quot;max-height: 400px; overflow-y: auto;&quot;&gt; &lt;table style=&quot;width: 100%; border-collapse: collapse;&quot;&gt; &lt;thead&gt;&lt;tr&gt; &lt;th style=&quot;position: sticky; top: 0; background: white; z-index: 10; border-bottom: 1px solid #ccc;&quot;&gt;姓名&lt;/th&gt; &lt;th style=&quot;position: sticky; top: 0; background: white; z-index: 10; border-bottom: 1px solid #ccc;&quot;&gt;城市&lt;/th&gt; &lt;/tr&gt;&lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;张三&lt;/td&gt; &lt;td&gt;北京&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;李四&lt;/td&gt; &lt;td&gt;上海&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt;</pre> <h3>列宽错位？<code>table-layout: fixed + 显式宽度是关键

当内容长度差异大（比如一列全是短文本，另一列是长 URL），sticky 表头容易和下面数据列对不齐。这不是 bug，是表格默认 table-layout: auto 导致各列宽度随内容重算，而 <thead> 和 <code><tbody> 是两个独立渲染块。 <ul><li>给 <code><table> 加 <code>table-layout: fixed

为每个 <th> 和对应列的 <code><td> 设置相同 <code>width 或 min-width（如 width: 20% 或 width: 150px）

如果列数多且宽度难预估，可用 JS 动态读取第一行 <td> 的 <code>offsetWidth，再赋给对应 <th> 的 <code>style.width

IE11 及以下必须降级：分离 <thead> + 手动同步列宽 <p>IE 完全无视 <code>position: sticky，强行加只会让表头消失或错位。务实做法是把表头抽出来，和表格本体拆成两个独立 <table>： <ul><li>外层用 <code><div style="max-height: 400px; overflow-y: auto;"> 包裹数据表格 <li>表头单独放一个无边框、无滚动的 <code><table>，放在数据表格上方 <li>两表格都设 <code>table-layout: fixed，并用 JS 监听 window.resize 和 tbody.scroll，同步每列 offsetWidth

更简单但略糙的替代：所有 <th> 和 <code><td> 都加 <code>width 内联样式，靠人工对齐

真正麻烦的从来不是“怎么写”，而是“为什么写了没反应”——90% 的失败源于父容器没形成滚动上下文，或忘了设 background 和 z-index。IE 降级方案看着重，但比在生产环境里反复调试兼容性更省时间。