唯一可行路径是直接为每个<th>设置position: sticky；因<thead>和<tr>的display类型不支持粘性定位，仅<th><td>可响应sticky，且需满足容器max-height+overflow、显式top/z-index/背景色、table-layout: fixed及列宽一致等硬性条件。
直接给每个 <th> 加 position: sticky，而不是作用于 <thead> 或 <tr> —— 这是唯一能不破坏语义、不改结构、不引入 JS 的可行路径。
为什么 <thead> 上加 sticky 没反应
浏览器根本不把 <thead> 当作可粘性定位的元素：它的 display 是 table-header-group，内部定位逻辑被重置为 static，任何 top 或 z-index 都会被忽略。你看到的“没效果”，不是写错了，是根本没生效。
- 检查 DevTools 元素面板，
<thead>的 computedposition一定是static，哪怕你写了sticky -
<tr>同样无效，它默认是table-row，也不支持粘性定位 - 真正能响应
sticky的，只有<th>和<td>这类单元格级元素
必须满足的四个硬性条件
哪怕 <th> 写了 sticky，缺一不可，否则表头会消失、错位、或只粘半截：
- 包裹表格的容器（比如
<div class="table-container">）必须设max-height+overflow-y: auto—— 没滚动上下文，sticky不触发 - 每个
<th>必须显式写position: sticky; top: 0;，不能靠继承或父级设置 -
<th>必须有z-index: 1070或更高（Bootstrap 环境下至少要盖过dropdown-menu的1050和modal的1060） -
<th>必须设不透明背景，如background-color: white，否则滚动时下面的<td>会透上来
列宽错位？那是 table-layout 没管好
表头和内容列宽不一致，不是 sticky 的锅，是表格自动计算列宽导致的渲染分裂。浏览器会分别按 <thead> 和 <tbody> 的内容算一遍宽度，结果自然对不上。
立即学习“前端免费学习笔记（深入）”；
- 必须加
table-layout: fixed（Tailwind 中是table-fixed），强制整表按第一行定义列宽 - 给每个
<th>和对应位置的<td>设相同宽度，例如w-32或min-w-[120px] - 避免
white-space: normal导致长文本换行撑开列宽；用whitespace-nowrap或truncate - 别依赖
<colgroup>—— 它在响应式场景下不可控，且无法通过 Tailwind 类直接干预
iOS Safari 下表头闪动或突然失效
iOS 15.4 及更早版本对 sticky 触发极其敏感，稍有偏差就回退成 static，尤其在地址栏缩放抖动时。
- 容器高度别用
h-[400px]，改用min-h-[400px]，避免 Safari 高度计算失败 -
z-index必须显式声明数字，z-10在某些层叠上下文中不够，建议起步用z-50或z-1070 - 确保容器没有
transform、filter、perspective—— 这些会创建新层叠上下文，切断sticky定位链 - 整个页面别在
body或根div上设overflow-x: hidden，它可能意外阻断粘性参考链
最易被忽略的一点：所有这些规则都只在「单元格层级」起效。你没法绕过 <th> 直接操作语义容器，也没法靠一层 CSS 类全局启用——每个 <th> 都得亲手加 sticky、top、z-index 和背景色。这不是冗余，是规范要求。
