使用 position: sticky 可实现表格表头固定，通过设置 top: 0 使表头在滚动时粘滞显示，需避免父容器 overflow: hidden 并采用 border-collapse: separate 以确保正常生效。
在网页中处理长表格时，用户滚动页面过程中表头容易消失，影响数据查看。使用 CSS 的 position: sticky 可以轻松实现表头固定效果，既简单又高效，无需 JavaScript。
什么是 position: sticky？
sticky 定位是相对定位（relative）和固定定位（fixed）的结合体。元素在正常文档流中显示，直到滚动到某个设定的阈值（如距顶部 0px），就“粘”在指定位置，像 fixed 一样固定住。
要让表格的表头（ 中的内容）在滚动时保持可见，只需对 以下是实现 sticky 表头的关键代码和注意事项： 立即学习“前端免费学习笔记（深入）”； 说明：添加 background 是为了避免下方内容透过表头；z-index 确保表头在其他内容之上。 基本上就这些。position: sticky 是目前最简洁可靠的表头固定方案，兼容性良好（现代浏览器均支持），适合大多数场景。 或
设置 sticky 定位。
实现步骤
或
设置 position: sticky
示例代码
姓名
年龄
城市
张三 28 北京 李四 32 上海
常见问题与解决
