position: sticky在<thead>上失效的根本原因是浏览器找不到滚动锚点，需确保父容器设max-height+overflow-y:auto、无transform/overflow:hidden阻断、top值明确且<thead>为直系子元素。
直接用 position: sticky 是最轻量、兼容性最好的方案，但必须满足滚动容器、top 值、无阻断 overflow 这三个硬条件；display: block 方案虽能绕过 sticky 限制，但列宽对齐极易出错，只适合简单、列数固定且内容长度可控的场景。
为什么 position: sticky 在 <thead> 上经常失效？
不是写法错了，是浏览器没找到滚动锚点。常见现象包括：<thead> 完全不动、滚动时闪一下就消失、或只在 Chrome 有效而 Safari 失效。
-
<thead>的 sticky 行为依赖其最近的、具有overflow-y: auto或scroll且高度受限的祖先容器 —— 这个容器不能是<table>自身（它默认不产生滚动上下文） - 父容器若设了
overflow: hidden、transform、will-change或filter，会创建新的 stacking context 并阻断 sticky -
top值必须明确设置（如top: 0），不能为auto或负值；若父容器有 padding-top，top需覆盖该偏移 -
<thead>必须是父容器的直系子元素，不能被<div>或其他 wrapper 包裹（否则 sticky 作用域错位）
怎么写一个真正可用的 sticky 表头？
关键不在多加属性，而在结构和容器控制精准。以下是最小可靠组合：
- 用
<div class="table-wrapper">包裹<table>，并设max-height: 400px+overflow-y: auto -
<table>设width: 100%和table-layout: fixed（防止列宽随内容撑开） -
<thead>设position: sticky; top: 0; z-index: 2；同时确保其background覆盖下方内容（否则滚动时文字透出） - 所有
<th>和<td>显式设min-width或用width（例如width: 120px），避免因内容长度差异导致列错位
示例片段：
立即学习“前端免费学习笔记（深入）”；
<div class="table-wrapper">
<table>
<thead>
<tr><th width="120">ID</th><th width="200">Name</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>Alice</td></tr>
</tbody>
</table>
</div>
.table-wrapper {
max-height: 400px;
overflow-y: auto;
}
table { table-layout: fixed; width: 100%; }
thead { position: sticky; top: 0; background: white; z-index: 2; }
th, td { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
为什么 display: block 方案容易列宽错位？
因为 tbody { display: block } 后，<tr> 默认失去表格行语义，即使再设 display: table，列宽也不再继承自 <thead> 的 <th> 宽度计算结果。
- 必须给
<thead>和<tbody>的每一行都设display: table; width: 100%; table-layout: fixed - 滚动条出现后，
<tbody>实际宽度比<thead>少约 16–17px（滚动条宽度），需手动补偿：给<thead>加padding-right: 17px或用scrollbar-gutter: stable both（Chrome 94+/Firefox 97+ 支持） - 若列内容含长文本或图片，
white-space: nowrap+overflow: hidden缺一不可，否则仍会撑裂列宽 - 此方案在 IE11 及部分旧版 Safari 中行为不一致，无法保证列对齐
真正容易被忽略的是：无论选哪种方案，table-layout: fixed 和显式列宽控制（width 或 min-width）都是列对齐的前提；没有它们，任何“固定表头”都只是视觉假象——滚动几下，表头和数据就彻底错开了。
