在CSS实战中摸爬滚打多年后，我总结出用纯CSS实现表格表头固定（即“固定表头”）最靠谱的原生方案就是 先说一个很多同学踩过的坑：为什么给 浏览器对表格内部元素有一套特殊的渲染规则。 典型的“症状”包括：表头跟着内容一起滚动、突然消失、或者只在某些列上“半固定”地抖一下。Bootstrap 的 真正的解药是：直接把 即便你把 sticky 加在了 常见的错误：容器用内容撑高，没有设高度；或者设了 推荐的结构简单明了：
所有滚动相关的样式，只加在 固定表头后，另一个常见问题是 解决方案很简单：position: sticky。它无需依赖JavaScript，简洁高效，但有一个大坑：并非简单贴在 上就能搞定。大多数翻车现场，问题都出在层级、容器或浏览器渲染上下文这些容易被忽略的细节上。
甚至 加上 position: sticky 或者 Bootstrap 的 sticky-top 类，死活不生效？
别再往
上贴 sticky 了
默认的 display 值是 table-header-group，这个值会强制覆盖你设置的 position: sticky，把它重置回 static。你在 DevTools 里看着样式明明写上了，但实际上一滚动它就“隐身”了。
sticky-top 类是为块级元素（比如 、）设计的，对表格结构天生无效。position: sticky 作用在 元素上。记住，是 ，不是 ，也不是 。
固定表头的三件套：top、z-index、背景色，一个都不能少
上，也不代表就稳了。有三大要素必须同时设置，缺一个，效果就会出问题——比如文字穿透、被遮挡、或者吸顶后变透明。
top: 0：必须显式写，不能用 auto 或者省略。零就是零，这是它吸在顶端的基准线。z-index: 10（或更高）：这个不能是 auto。如果表格嵌套在 Modal、弹窗或其它层级复杂的组件里，记得检查祖先元素的 z-index，别让表头被盖住。background-color: #fff（或与表头一致的色值）：这个最容易被忽略。没有背景色，表头就是“透明”的，滚动时下方 的内容就会透上来，视觉上简直灾难。
容器必须是个正经的“可滚动容器”
position: sticky 自己不会创造滚动，它依赖父级容器提供明确的滚动上下文。你得给这个容器设定一个固定的高度或最大高度，再加上 overflow-y: auto，它才能知道什么时候该让表头粘住。height: 100% 但父容器高度不明确。另外，容器的祖先元素千万不要带有 transform、filter、will-change 或 overflow: hidden 这些属性——它们会切断 sticky 的滚动链，让表头失灵。...
.table-container 上。列宽错位？那是你没锁死布局
和 的列宽对不齐。原因在于默认的 table-layout: auto 下，宽度由内容自适应决定；而 sticky 后的 在某种程度上脱离了原始流，宽度计算就可能走样。
表格如何添加浮动表头？CSS sticky固定首行完整指南
使用CSS的position:sticky实现表格固定表头时，需将sticky应用于th元素，并设置top:0、z-index和背景色以覆盖滚动内容。容器需设定固定高度和overflow-y:auto，同时避免祖先元素含有transform、filter等影响sticky定位的属性。另外，设置table-layout:fixed可防止列宽错位，保证表格布局稳
