position: sticky 在表格中常不生效，根本原因是浏览器渲染模型限制：table 元素不构成定位上下文，thead/th 在 firefox 中完全不支持，chrome 仅部分支持；稳定方案是用 div 模拟表头并手动同步列宽与滚动。
为什么 + position: sticky在表格里经常不生效
根本不是你写错了 CSS，而是浏览器渲染模型不让它生效。<table> 的 <code>display: table 不构成 sticky 所需的「定位上下文」，<thead> 和 <code><th> 在 Firefox 中至今（2024 年起持续至今）完全不支持 sticky，Chrome 99+ 虽支持 <code><th> 上的 <code>top: 0，但 <tr> 仍被忽略。即使勉强生效，横向滚动时首列无法固定、列宽随内容动态变化导致错位，都是常态。
<h3>用 div 模拟表头 + sticky 是唯一稳定方案</h3>
<p>绕过原生表格限制，把表头和主体拆成两个独立滚动区域，并手动同步列宽：</p>
<ul>
<li>
<code>.thead-sticky 必须设 position: sticky、top: 0 和显式 z-index（比如 z-index: 10），否则可能被主体内容遮挡
.tbody-scroll 需设固定高度（如 max-height: 400px）和 overflow-y: auto，否则无法触发滚动
列宽不能靠 table-layout: fixed（div 布局中无效），必须硬编码 width 或用 JS 同步：比如通过 getBoundingClientRect().width 获取表头单元格宽度，再赋给对应主体列
表头与主体的列结构必须完全一致：<div> 数量、顺序、<code>colspan 逻辑一一对应
父容器设置错误是 sticky 静默失效的主因
哪怕用了 div 方案，position: sticky 也可能毫无反应。以下检查项比重写代码更有效：
- 父容器是否设置了
overflow: hidden、overflow: auto 或 transform（比如 transform: translateZ(0) 在 iOS Safari 15.4–16.3 中会禁用 sticky）
-
.thead-sticky 的直接父容器是否提供了滚动上下文？即是否设置了 max-height + overflow-y: auto
-
top 值是否显式写出（如 top: 0），而非 top: auto 或留空
- 是否误将
sticky 加在 <table> 或 <code><thead> 上——这些元素本身不参与 sticky 锚定链
<h3>多行表头或首列同时吸顶的 tricky 点</h3>
<p>多层表头不是简单套多个 <code>position: sticky 就能搞定：
- 第一行表头设
top: 0，第二行设 top: 42px（假设首行高 42px），实现“接力吸顶”
- 若要固定首列，需为表头第一列和主体每行第一列都加
left: 0，并确保它们 z-index 层级正确，避免交叉点被遮盖
- 横向滚动时，表头和主体的
scrollLeft 必须手动同步——监听主体容器的 scroll 事件，再设 thead-sticky.scrollLeft = tbody-scroll.scrollLeft
- 移动端快速滚动下，
sticky 可能滞后 1–2 帧；加 will-change: transform 到 .thead-sticky 可缓解，但别滥用，否则引发不必要的图层提升
真正麻烦的从来不是怎么写 sticky，而是确认它有没有被某层看不见的 overflow: hidden 或 transform 拦腰截断——这种问题只能一层层 inspect，没法靠猜。
<table> 的 <code>display: table 不构成 sticky 所需的「定位上下文」，<thead> 和 <code><th> 在 Firefox 中至今（2024 年起持续至今）完全不支持 sticky，Chrome 99+ 虽支持 <code><th> 上的 <code>top: 0，但 <tr> 仍被忽略。即使勉强生效，横向滚动时首列无法固定、列宽随内容动态变化导致错位，都是常态。
<h3>用 div 模拟表头 + sticky 是唯一稳定方案</h3>
<p>绕过原生表格限制，把表头和主体拆成两个独立滚动区域，并手动同步列宽：</p>
<ul>
<li>
<code>.thead-sticky 必须设 position: sticky、top: 0 和显式 z-index（比如 z-index: 10），否则可能被主体内容遮挡
.tbody-scroll 需设固定高度（如 max-height: 400px）和 overflow-y: auto，否则无法触发滚动table-layout: fixed（div 布局中无效），必须硬编码 width 或用 JS 同步：比如通过 getBoundingClientRect().width 获取表头单元格宽度，再赋给对应主体列<div> 数量、顺序、<code>colspan 逻辑一一对应
父容器设置错误是 sticky 静默失效的主因
哪怕用了 div 方案，position: sticky 也可能毫无反应。以下检查项比重写代码更有效：
- 父容器是否设置了
overflow: hidden、overflow: auto或transform（比如transform: translateZ(0)在 iOS Safari 15.4–16.3 中会禁用 sticky） -
.thead-sticky的直接父容器是否提供了滚动上下文？即是否设置了max-height+overflow-y: auto -
top值是否显式写出（如top: 0），而非top: auto或留空 - 是否误将
sticky加在<table> 或 <code><thead> 上——这些元素本身不参与 sticky 锚定链 <h3>多行表头或首列同时吸顶的 tricky 点</h3> <p>多层表头不是简单套多个 <code>position: sticky就能搞定：- 第一行表头设
top: 0，第二行设top: 42px（假设首行高 42px），实现“接力吸顶” - 若要固定首列，需为表头第一列和主体每行第一列都加
left: 0，并确保它们z-index层级正确，避免交叉点被遮盖 - 横向滚动时，表头和主体的
scrollLeft必须手动同步——监听主体容器的scroll事件，再设thead-sticky.scrollLeft = tbody-scroll.scrollLeft - 移动端快速滚动下，
sticky可能滞后 1–2 帧；加will-change: transform到.thead-sticky可缓解，但别滥用，否则引发不必要的图层提升
overflow: hidden或transform拦腰截断——这种问题只能一层层 inspect，没法靠猜。 - 第一行表头设
