原生+position:sticky跨浏览器不可靠，稳定方案只有模拟表头或用element ui等组件库；因不构成滚动上下文、ios safari禁用、firefox不支持及列宽变化错位等原因导致失效。

原生 <thead> + <code>position: sticky 在多数真实项目中不可靠，尤其跨浏览器时大概率静默失效；能稳定工作的方案只有两种：用 <div> 模拟表头，或使用成熟组件库（如 Element UI 的 <code>el-table）。

为什么 <th> 设了 <code>position: sticky 却不吸顶

不是代码写错了，是浏览器渲染机制卡住了它：

• <table> 的 <code>display: table 不构成 sticky 所需的「滚动上下文」，<thead> 的父级默认没有 <code>height 和 overflow-y
• 哪怕只在祖先元素上加了 transform: translateZ(0)（常见于性能优化），iOS Safari 15.4–16.3 就会直接禁用 sticky
• Firefox 至今不支持 <th> 或 <code><tr> 上的 sticky，Chrome 99+ 虽支持 <code><th>，但列宽动态变化时仍会错位 <li> <code>top 值没显式设置（比如留空或设为 auto），sticky 就不会触发

用 <div> 模拟表头是最稳的方案 <p>绕过原生表格限制，把表头和主体拆成两个独立滚动区域，手动对齐列宽：</p> <ul><li>表头容器必须是 <code><div>，设 <code>position: sticky、top: 0、z-index: 10（缺一不可）

主体区域用另一个 <div> 包裹 <code><tbody>，并设 <code>max-height: 400px 和 overflow-y: auto

列宽不能靠 table-layout: fixed —— 它在 div 布局里无效；得用硬编码 width，或用 JS 读取 getBoundingClientRect().width 后同步

表头与主体的 <div> 结构必须完全一致：列数、顺序、<code>colspan 逻辑一一对应

多行表头怎么叠着吸顶

多个 sticky 元素不是“一起固定”，而是按原始位置依次触发，后一个会把前一个往上顶：



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

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

下载

• 第一行表头设 top: 0，第二行设 top: 42px（假设首行高 42px，含 padding/border）
• 所有 sticky 元素必须共享同一个滚动祖先容器，且该容器不能有 overflow: hidden
• 别给 sticky 元素本身加 margin 或动态改 height，否则会破坏锚点计算，导致跳变
• 如果吸顶后要变色或缩放，用 transform + transition，别动布局属性

Element UI 等组件库内部怎么做的

它们早绕过了原生表格坑，核心是封装了一套 div 渲染层：

• el-table 的表头实际是 <div class="el-table__header-wrapper">，天然支持 sticky <li>只需加属性 <code>is-sticky，再通过 CSS 变量控制 --sticky-top 和 --sticky-zIndex
• 横向滚动时，部分版本需监听 scroll 事件，手动同步表头和 body 的 scrollLeft
• 父容器若设了 overflow: auto 或 overflow: hidden，会截断 sticky 行为，必须避开

真正容易被忽略的是：sticky 元素不脱离文档流，但它吸顶后仍占原始位置空间。如果后续内容没做避让，滚动时就会重叠或留白——得给紧跟它的元素加 margin-top（值等于 sticky 元素自然高度），或者用 JS 动态适配。