最可靠方案是用 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 渲染的 会直接变成单列堆叠。它看起来“能滚”，但已不是表格。

• table-layout: fixed + width 在 display: block 下完全不生效
• Safari 对 tbody 的 sticky 支持极差，但对 th 很稳定
• 所有基于标准 DOM 表格语义的库（如 react-table-library、TanStack Table）都依赖原生 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 行为容易被忽略。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 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，都可能让整张表在滚动瞬间崩掉视觉对齐。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！