原生<thead>+position:sticky跨浏览器不可靠，稳定方案只有<div>模拟表头或用Element UI等组件库；因<table>不构成滚动上下文、iOS Safari禁用、Firefox不支持及列宽变化错位等原因导致失效。
原生 <thead> + position: sticky 在多数真实项目中不可靠，尤其跨浏览器时大概率静默失效；能稳定工作的方案只有两种：用 <div> 模拟表头，或使用成熟组件库（如 Element UI 的 el-table）。
为什么 <th> 设了 position: sticky 却不吸顶
不是代码写错了，是浏览器渲染机制卡住了它：
-
<table>的display: table不构成 sticky 所需的「滚动上下文」，<thead>的父级默认没有height和overflow-y - 哪怕只在祖先元素上加了
transform: translateZ(0)（常见于性能优化），iOS Safari 15.4–16.3 就会直接禁用 sticky - Firefox 至今不支持
<th>或<tr>上的 sticky，Chrome 99+ 虽支持<th>，但列宽动态变化时仍会错位 -
top值没显式设置（比如留空或设为auto），sticky 就不会触发
用 <div> 模拟表头是最稳的方案
绕过原生表格限制，把表头和主体拆成两个独立滚动区域，手动对齐列宽：
- 表头容器必须是
<div>，设position: sticky、top: 0、z-index: 10（缺一不可） - 主体区域用另一个
<div>包裹<tbody>，并设max-height: 400px和overflow-y: auto - 列宽不能靠
table-layout: fixed—— 它在div布局里无效；得用硬编码width，或用 JS 读取getBoundingClientRect().width后同步 - 表头与主体的
<div>结构必须完全一致：列数、顺序、colspan逻辑一一对应
多行表头怎么叠着吸顶
多个 sticky 元素不是“一起固定”，而是按原始位置依次触发，后一个会把前一个往上顶：
立即学习“前端免费学习笔记（深入）”；
- 第一行表头设
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 - 只需加属性
is-sticky，再通过 CSS 变量控制--sticky-top和--sticky-zIndex - 横向滚动时，部分版本需监听
scroll事件，手动同步表头和 body 的scrollLeft - 父容器若设了
overflow: auto或overflow: hidden，会截断 sticky 行为，必须避开
真正容易被忽略的是：sticky 元素不脱离文档流，但它吸顶后仍占原始位置空间。如果后续内容没做避让，滚动时就会重叠或留白——得给紧跟它的元素加 margin-top（值等于 sticky 元素自然高度），或者用 JS 动态适配。
