position: sticky 在原生 中对 或 无效，因 display: table-cell 阻断定位上下文；可靠方案是改用 display: grid 布局或三层 div 同步滚动。
position: sticky 在原生 中对 或 大概率无效，这不是写法错，而是规范和渲染模型限制——display: table-cell 阻断了 sticky 的定位上下文。真能用的方案，必须绕开原生表格结构或严格约束容器行为。
为什么给 加 position: sticky; left: 0 没反应浏览器（尤其 Safari 旧版、Firefox 全周期）不保证 sticky 在 table-cell 上生效，因为表格布局属于独立渲染流， 和 不构成 sticky 所需的「块级格式化上下文」。常见现象是：列看似固定，但一滚动就跳动、错位，或完全静默失效。即使 Chrome 最新版偶尔“看起来可以”，也依赖父容器恰好满足宽度、溢出、层叠顺序等隐式条件，不可靠。
- 直接在
标签上设 overflow-x: auto —— 无效， 本身不响应 overflow
- 只给第一列
加 left: 0，没同步给对应 —— 表头固定了，数据列却跟着滚动
- 没设
background-color —— 滚动时右侧内容透上来，文字被盖住
父容器是 display: inline 或未设明确宽度 —— sticky 失去参考基准
用 display: grid 替代 是最稳路径放弃语义化 标签，改用 div + grid，把固定逻辑交给容器控制，而非单元格自身。这是目前兼容性、可维护性、调试效率最高的做法。关键不是“怎么让列不动”，而是“怎么让整个行区域在滚动时，左侧部分始终卡在视口左边界”。grid 天然支持 position: sticky 作用于子项，且列宽可控。
- 外层
.grid-table 设 display: grid; grid-template-columns: 120px 1fr 1fr 1fr; —— 前几列必须显式定宽，否则 left 偏移无法对齐
- 需要固定的列（如首列）加
position: sticky; left: 0; z-index: 2; background: white;
- 第二列固定？再加一个
left: 120px;，第三列 left: 270px;（前两列宽之和），依此类推
- 务必设
overflow-x: auto 在 .grid-table 上，且其父容器不能是 inline 或无宽度约束
- 表头也要固定？单独给第一行所有子元素加
position: sticky; top: 0;，并确保 z-index 高于列固定项
非得用原生 ？只能靠三层 div 同步滚动如果 SEO、无障碍或遗留系统强制要求保留 语义，唯一可行方案是视觉拆分：把表格逻辑切为 left-fixed、main-scroll、right-fixed 三个平行 div，各自内部用 display: table 模拟，再用 JS 同步横向滚动位置。这不是纯 CSS 方案，但比硬套 sticky 更可控，且能覆盖 IE11（需降级为 absolute + scrollLeft 监听）。
- 三个容器必须行高完全一致 —— 推荐统一设
line-height 和 vertical-align: middle，避免视觉错行
- 监听
main-scroll.scrollLeft，节流后赋值给 left-fixed.scrollLeft = 0（它不滚动，只重定位）
- 边框对齐易出问题？统一用
border-collapse: separate; border-spacing: 0;，别用 collapse
- 滚动条占位导致底部横线断开？给外层 wrapper 加
padding-bottom: 17px; margin-bottom: -17px;
- 不要在
里嵌 flex 或 grid —— 会破坏行高计算基准
overflow-x: auto 不出滚动条？先查这三处
内容明显溢出但无滚动条，根本原因常是尺寸链断裂，不是 CSS 写错了。
-
.table-wrapper 是否设了 white-space: nowrap？没它，长文本自动换行，宽度压不超容器
或 grid 容器是否用了 width: 100% 且父容器又没设宽度？结果就是“100% of undefined” → 宽度塌缩
- 是否误加了
display: inline 或 inline-block 到滚动容器？它们不创建块级格式化上下文，overflow 失效
真正起作用的永远是「有明确宽度 + 显式 overflow-x: auto 的块级父容器」，而不是 本身。固定列的复杂点不在定位，而在宽度对齐和滚动上下文的显式声明——漏掉任意一环，整个效果就断掉。
|
| |
|
| |
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
