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