加position: sticky无效，因浏览器不将视为可定位元素；必须给每个设置position: sticky; top: 0，并满足父容器max-height+overflow-y:auto、显式background-color和z-index≥10三个硬条件。
为什么thead加position: sticky没反应
因为浏览器根本不把 thead 当作 sticky 的作用目标——它只是语义容器，不参与定位计算。你写 thead { position: sticky; top: 0; }，开发者工具里样式显示生效，但滚动时完全没反应。
- 真正要“粘住”的是每个
th元素，不是thead容器 -
th必须保持display: table-cell（不能被改成flex或block） - 祖先元素若用了
transform、filter或will-change，会切断 sticky 滚动链 -
table父容器若设了overflow: hidden，也会裁剪 sticky 渲染区域
th 上怎么写 sticky 才有效
不是写在 thead，而是逐个给 th 加规则，并满足三个硬性条件：
- 包裹表格的容器（比如
<div class="table-container">）必须设 <code>overflow-x: auto（横向滚动必需）或max-height+overflow-y: auto（纵向滚动必需） -
thead必须真实存在，内部要有tr和th，结构完整 - 每个
th显式设background-color（否则滚动时透出下面内容），并加z-index: 10（防止被tbody盖住）
基础写法示例：
th {
position: sticky;
top: 0;
background: white;
z-index: 10;
}
多级表头或首列固定时top/left怎么配
sticky 支持同时设置 top 和 left，但交点单元格（左上角）必须显式叠加层级：
- 第一级表头（最顶行）：
top: 0; z-index: 20 - 第二级表头（如子列）：
top: 36px（假设第一行高 36px），z-index: 15 - 首列固定：
th:first-child, td:first-child { left: 0; z-index: 25; } - 左上角交点：
thead th:first-child { top: 0; left: 0; z-index: 30; }
注意：所有 sticky 单元格都必须有背景色，否则滚动时下方文字会透上来。
列宽错位、移动端闪动这些坑怎么绕开
这不是 sticky 本身的问题，而是表格自动计算列宽导致的——th 和对应列的 td 宽度不一致，就会明显错位。
- 用
table-layout: fixed（Tailwind 对应table-fixed），禁用浏览器自适应分配 - 给每个
th和同一列的所有td显式设宽度，比如min-w-[120px]或width: 120px - 避免在
tr或thead上设overflow: hidden，它会裁剪 sticky 元素的渲染范围 - 如果表格嵌在 modal 或 offcanvas 里，这些组件常默认用
transform动画，得把表格抽出来单独包裹滚动容器
最易被忽略的一点：sticky 的生效依赖“最近的滚动容器”，而这个容器不能是 table 自身——table 不该设 position: relative，否则会干扰 sticky 定位流；真正的滚动容器必须是它的父级 div。
