最可靠方案是用 position: sticky 配合滚动容器，禁用 display: block；因后者会破坏表格格式化上下文，导致 colspan 失效、列宽塌缩、border-collapse 异常及 React Table Library 渲染错乱，且 Safari 对 tbody 的 sticky 支持极差。
直接用 position: sticky 配合容器滚动是最可靠、语义最干净的方案，display: block 强制拆解表格结构在 React Table Library、Safari 或带 colspan 的场景下大概率出错。
为什么不能给 tbody 设 display: block
这是后台开发中最常踩的坑：一旦把 tbody 改成 block，表格就脱离了原生格式化上下文——colspan 失效、列宽自动塌缩、border-collapse 彻底失效（右侧多出一条边框就是典型表现），React Table Library 渲染的 <tbody> 会直接变成单列堆叠。它看起来“能滚”，但已不是表格。
<ul>
<li>
<code>table-layout: fixed + width 在 display: block 下完全不生效
tbody 的 sticky 支持极差，但对 th 很稳定table 结构
position: sticky 的生效前提必须满足
sticky 不是“绝对定位”，它依赖最近的、有滚动行为的祖先容器。如果只给 th 加 position: sticky; top: 0，但外层没设 overflow-y: auto，它就只是个普通元素。
- 滚动容器必须是
table的**直接父级**（比如.table-container），不能是body或更外层布局容器 - 该容器需明确设置
max-height或height，否则overflow-y: auto不触发 -
th必须设background-color，否则滚动时内容会从表头底下透上来 - 在 Safari 中，建议加
-webkit-backface-visibility: hidden到th，避免粘性失效
实际部署时要注意的兼容细节
后台系统常需适配老旧内网浏览器或 Electron 封装环境，这些地方的 sticky 行为容易被忽略。
立即学习“前端免费学习笔记（深入）”；
- IE 完全不支持
sticky，如需兼容，得降级用 JS 监听scroll+transform: translateY()模拟（但仅限兜底） - 若表格嵌套在
position: absolute的弹窗中，父容器必须加overflow: hidden，否则tbody滚动会“溢出”并覆盖固定表头 - 当同时固定标题（
h1）和表头时，thead th的top值应等于标题高度（含 padding/margin），不能写死0 - 横向滚动时，
sticky表头默认不随动——如需同步，得配合overflow-x: auto和table-layout: fixed+ 显式th宽度
真正麻烦的从来不是“怎么让表头不动”，而是“怎么不动得刚刚好，且不破坏后续所有交互逻辑”。sticky 方案表面简单，但每个属性都在参与布局约束，漏掉一个 z-index 或一个 background-color，都可能让整张表在滚动瞬间崩掉视觉对齐。
