position: sticky 在表格中不生效是因为 display: table-cell 阻断了其定位上下文，且浏览器兼容性差；稳定方案是弃用原生 table，改用 display: grid 布局并对外层容器应用 sticky。
为什么 position: sticky 在表格里经常不生效
直接给 <td> 或 <code><th> 加 <code>position: sticky 大概率没反应，根本原因是：表格单元格的定位上下文受 display: table-cell 限制，而 sticky 仅在「块级流内」或「行内流内」有效，表格布局会拦截该行为。浏览器（尤其是 Chrome 115+ 之前）对 sticky + 表格的兼容支持极弱，不是写法错，是规范层面不保证。
真正能稳定工作的方案，是绕过原生表格结构——把列固定逻辑交给外层容器控制，而非依赖单元格自身定位。
- 固定列必须用
position: sticky作用在<div> 容器上，不是 <code><td> <li> <code>left值需配合z-index（否则会被右侧内容盖住） - 表格整体必须设
overflow-x: auto，且父容器有明确宽度约束 - Firefox 对
sticky在table内部的支持比 Chrome 更差，不建议尝试 - 固定多列？连续给多个
grid-column元素加position: sticky和递增left值（如left: 120px） - 表头也要固定？把第一行单独设为
position: sticky; top: 0，并确保其z-index最高 - 响应式问题：
grid在小屏下可用@media改为display: block回退 - 伪元素内容必须用
content: attr(data-label)或 JS 注入，不能依赖 DOM 结构复制 - 列宽必须硬编码进 CSS，否则伪元素和真实列无法像素级对齐
- IE11 不支持
scrollLeft监听，需 fallback 到requestAnimationFrame轮询 - 性能敏感场景慎用——每次滚动都触发重排，移动端易卡顿
- 必须给
.grid-table加transform: translateZ(0)或will-change: scroll-position触发硬件加速 - 避免在 sticky 列内使用
border-collapse类样式，Safari 渲染异常 - 测试时务必用真机 —— iOS 模拟器常误报 sticky 生效
- 如果项目需兼容 iOS 15 及更早，别挣扎，直接上 JS 滚动同步方案
用 display: grid 替代 <table> 实现真 sticky 列
<p>放弃 <code><table> 标签，改用语义化但结构可控的 <code>grid 布局，是目前最可靠、可维护性最高的做法。每行是一个 <div class="row">，列靠 <code>grid-template-columns 控制，固定列直接加 position: sticky。
.grid-table {
display: grid;
grid-template-columns: 120px 1fr 1fr 1fr 1fr;
overflow-x: auto;
}
.sticky-col {
position: sticky;
left: 0;
z-index: 2;
background: #fff;
box-shadow: 1px 0 4px rgba(0,0,0,0.08);
}
注意：grid-template-columns 中前几列宽度要显式指定（不能全用 1fr），否则 left 偏移无法对齐；z-index 必须大于非 sticky 列，否则滚动时被覆盖。
保留 <table> 但用伪元素 hack 模拟固定列
<p>如果必须用语义化 <code><table>（比如 SEO 或无障碍要求强），唯一可行路径是：用绝对定位的伪元素「盖」在表格左侧，内容从 DOM 中复制过去，再通过 JS 同步滚动偏移。这不是纯 CSS 方案，但比强行 hack 表格更可控。
<p>核心思路：<code><table> 外层套 <code><div class="table-wrapper">，设 <code>overflow-x: auto；再用 ::before 伪元素撑出固定列区域，JS 监听 scrollLeft 并更新伪元素的 transform: translateX() 来对齐。
移动端 Safari 的 sticky 表格列特别注意事项
iOS 16.4+ 才开始支持 position: sticky 在 display: grid 容器中的列固定，此前版本即使写了 left 也完全无效。而且 Safari 对 z-index 层叠顺序的解析和 Chrome 不一致：若父容器没设 transform 或 will-change，sticky 元素可能被裁剪。
真正麻烦的不是怎么写 CSS，而是确认目标环境是否真的支持 sticky 表格列——查 CanIUse 数据只是起点，真机滚动测试缺一不可。
