表格如何添加浮动的表头？POSITION:STICKY固定首行

原生<thead>加position: sticky不可靠，因display: table-header-group会重置sticky为static；真正生效的是作用于<th>的sticky，需同时设置top: 0、z-index和background-color，并确保外层容器提供滚动上下文且列宽一致。

position: sticky 是目前唯一能原生、零 JS 实现表格首行浮动（即“固定表头”）的 CSS 方案，但它不是加在 <thead> 上就自动生效——绝大多数失败都源于层级、容器或渲染上下文配置错误。

为什么给 <thead> 加 sticky-top 或 position: sticky 没用？

浏览器对表格内部元素（<thead>、<tr>）有特殊渲染规则：display: table-header-group 会覆盖 position: sticky，导致计算后 position 被重置为 static。你在 DevTools 里能看到样式，但实际不生效。

• 现象包括：<thead> 滚动时完全不动、突然消失、只在部分列上“半固定”
• Bootstrap 的 sticky-top 类只对块级元素（如 <div>、<nav>）有效，对表格结构无效
• 真正起效的是直接作用于 <th>（或 <td>）的 position: sticky

必须设置的三要素：top、z-index、background-color

缺一不可，否则会出现文字透出、被遮挡、或吸顶后变透明等现象。

• top: 0：必须显式写，不能省略或设为 auto
• z-index: 10（或更高）：不能是 auto；若表格嵌套在 Modal 或其他组件中，需确认祖先 z-index 是否更低
• background-color: white（或与表头一致的色值）：防止滚动时下方 <tbody> 内容透上来

外层容器必须提供滚动上下文

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> 和 <td> 列宽不一致，原因是默认 table-layout: auto 下宽度由内容决定，而 sticky 后 <th> 脱离了原始流。

• 必须在 <table> 上设 table-layout: fixed
• 配合显式列宽控制：用 <col> 标签定义每列宽度，或统一给 th, td 设 width（如 width: 120px）
• 所有 th 和 td 的 padding、border 必须严格一致，否则视觉错位

最易被忽略的是：sticky 表头在 iOS Safari 15.4+ 才稳定支持，旧版需降级；另外，如果表格行数超千行，纯 sticky 可能卡顿，此时应结合虚拟滚动方案——但那是另一个问题了。