原生加position: sticky不可靠，因display: table-header-group会重置sticky为static；真正生效的是作用于的sticky，需同时设置top: 0、z-index和background-color，并确保外层容器提供滚动上下文且列宽一致。
position: sticky 是目前唯一能原生、零 JS 实现表格首行浮动（即“固定表头”）的 CSS 方案，但它不是加在 <thead> 上就自动生效——绝大多数失败都源于层级、容器或渲染上下文配置错误。
<h3>为什么给 <code><thead> 加 <code>sticky-top 或 position: sticky 没用？
浏览器对表格内部元素（<thead>、<code><tr>）有特殊渲染规则：<code>display: table-header-group 会覆盖 position: sticky，导致计算后 position 被重置为 static。你在 DevTools 里能看到样式，但实际不生效。
- 现象包括：
<thead> 滚动时完全不动、突然消失、只在部分列上“半固定” <li>Bootstrap 的 <code>sticky-top类只对块级元素（如<div>、<code><nav></nav>）有效，对表格结构无效 - 真正起效的是直接作用于
<th>（或 <code><td>）的 <code>position: sticky必须设置的三要素：
top、z-index、background-color缺一不可，否则会出现文字透出、被遮挡、或吸顶后变透明等现象。
-
top: 0：必须显式写，不能省略或设为auto -
z-index: 10（或更高）：不能是auto；若表格嵌套在 Modal 或其他组件中，需确认祖先z-index是否更低 -
background-color: white（或与表头一致的色值）：防止滚动时下方<tbody> 内容透上来 <h3>外层容器必须提供滚动上下文</h3> <p><code>position: sticky不会自己触发滚动，它依赖父级容器具备可滚动区域。- 容器需设
max-height: 500px（或具体高度） +overflow-y: auto - 不能靠内容撑高，也不能设
height: 100%却无明确父高 - 避免祖先元素带
transform、filter、will-change或overflow: hidden——这些会切断 sticky 的滚动链 - 推荐结构：
<div class="table-container"><table>...</table></div>，样式只加在.table-container上
对齐问题：列宽错位怎么解决？
固定表头后常出现
<th> 和 <code><td> 列宽不一致，原因是默认 <code>table-layout: auto下宽度由内容决定，而 sticky 后<th> 脱离了原始流。 <ul><li>必须在 <code><table> 上设 <code>table-layout: fixed - 容器需设
- 配合显式列宽控制：用
<col>标签定义每列宽度，或统一给th, td设width（如width: 120px） - 所有
th和td的padding、border必须严格一致，否则视觉错位
最易被忽略的是：sticky 表头在 iOS Safari 15.4+ 才稳定支持，旧版需降级；另外，如果表格行数超千行，纯 sticky 可能卡顿，此时应结合虚拟滚动方案——但那是另一个问题了。
-
