position: sticky固定表头需满足四个条件：包裹容器或tbody设max-height和overflow-y以创建滚动上下文；table-layout: fixed配合显式列宽防错位；th必须设z-index和背景色防遮挡；注意top: 0参照最近可滚动祖先，避免中间祖先overflow:hidden截断。

position: sticky 固定表头必须配 max-height 和 overflow-y

直接给 加 position: sticky; top: 0 不会生效，除非它的滚动上下文存在。关键不是表格本身，而是包裹它的容器或 必须形成滚动边界。

常见错误现象： 依然随内容一起滚动，或者只在顶部闪一下就消失。

• 上设 max-height: 300px; overflow-y: auto;（不能只设 overflow-y，必须有高度约束）
• 或者把整个 包进一个
  ，此时
  的 top: 0 才相对于这个 div 生效
  避免祖先元素带 overflow: hidden 或 overflow: clip，它们会截断 sticky 行为

  列宽错位？table-layout: fixed + 显式 width 是刚需

  滚动时表头和数据列对不齐，90% 是因为浏览器自动计算列宽。默认 table-layout: auto 下，

  和 的列宽可能各自独立计算，尤其当内容长度差异大时。
  • 给
  加 table-layout: fixed; width: 100%
  给每个
  统一控制
  慎用 min-width 或 flex 混合布局——表格内部不认 flex 属性，会导致宽度失效

  z-index 和 background-color 不是可选项，是必填项

  没加 z-index 和背景色时，滚动过程中表头文字会被下方

  的边框或内容遮挡，尤其在高密度表格中非常明显。
  提到表格外，变成独立的

  和对应位置的	设置相同宽度，比如 width: 120px 或用
  必须设 z-index: 10（数值大于 tbody 内容的默认层叠顺序） background-color 要显式声明，推荐 #fff 或浅灰，不能依赖透明或父级背景 如果表格有 border-collapse: collapse，记得给	单独加 border-bottom，否则表头底边会“断开” IE11 及更老浏览器不支持 sticky？降级方案要提前准备 2026 年仍有部分内网管理系统要求兼容 IE11，而它完全忽略 position: sticky。这时不能靠 polyfill 补救，得换结构。 使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审 使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。 下载 把

  用 table-layout: fixed + 预设列宽，让两个表格列宽强制一致
  监听 scroll 事件，动态同步两个表格的 scrollLeft（仅需一行 JS）
  注意：不要改
  的 display: block —— 这会让语义丢失、屏幕阅读器失效，现代方案里已淘汰

  实际最易被忽略的点是：**top: 0 的参照物不是视口，而是最近的「有滚动能力」的祖先容器**。很多人在表格外又套了多层

  ，其中某一层恰好带了 overflow: hidden，结果 sticky 直接失效，排查起来非常隐蔽。