position: sticky 在 <th> 或 <td> 上设 left: 0 失效，是因 W3C 规范禁止其在 display: table-cell 元素上生效；需改用脱离原生表格流的结构（如 div 模拟）或 DOM 拆分方案实现固定列。
position: sticky 在 <th> 或 <td> 上设 left: 0 失效，不是你写错了，是规范禁止它在 display: table-cell 上工作。
为什么 position: sticky 固定列经常没反应
浏览器确实支持 sticky（Chrome 56+、Firefox 59+、Safari 15.4+），但表格单元格的渲染上下文受 table/tbody 等 display 类型限制。W3C 规范明确禁止 sticky 在 display: table-cell 元素上生效——哪怕你加了 z-index、left、background，它也静默忽略。
真正能用 sticky 的，只有脱离原生表格流的结构：比如把首列抽出来单独做 <div> 容器，再用 CSS 模拟表格行为。
- 别给
<table>直接套overflow-x: auto后对th:first-child加sticky——大概率白忙 - 如果用了
border-collapse: collapse，固定列边框会和主内容错位，必须切回separate+border-spacing: 0 -
table-layout: fixed是必要前提，否则列宽随内容浮动，left偏移量无法稳定计算
用 sticky 实现单列固定的最小可行方案
前提是：只固定首列（或末列），且不需兼容 Safari 15.3 及更早版本。
立即学习“前端免费学习笔记（深入）”；
核心三要素缺一不可：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 外层容器设
overflow-x: auto，且有明确宽度（不能是max-content或未设限的width: auto） -
<table>必须声明table-layout: fixed，并配合<col>或首行<th>显式定义列宽 - 固定列选择器要覆盖所有行：
.my-table th:first-child, .my-table td:first-child，同时加position: sticky; left: 0; z-index: 10; background: white;
示例关键样式：
.table-wrapper {
overflow-x: auto;
width: 800px;
}
.my-table {
table-layout: fixed;
width: 100%;
}
.my-table th:first-child,
.my-table td:first-child {
position: sticky;
left: 0;
z-index: 10;
background: #fff;
border-right: 1px solid #ddd;
}
固定多列或需要 Safari 15.3 兼容时，必须拆结构
当你要固定前两列、或在 Safari 15.3（含）以下运行，sticky 方案直接失效。此时唯一可靠路径是 DOM 结构拆分：
- 把表格逻辑拆成三个平行
<div>：left-fixed（首列）、main-scroll（中间可滚动区）、right-fixed（末列，可选） - 每个
<div>内部用display: table+table-row+table-cell模拟表格，绕过原生<table>的限制 - 监听
main-scroll.scrollLeft，同步设置left-fixed.scrollLeft = 0和right-fixed.scrollLeft = 0（它们本身不滚动） - 所有三块的行高必须严格一致：统一用
line-height+vertical-align: middle，不能依赖内容撑高
滚动条占位导致底部边框断开？给外层 .table-wrapper 加 padding-bottom: 17px 再用 margin-bottom: -17px 抵消，为滚动条留空间。
容易被忽略的细节：边框对齐与 Safari 渲染抖动
即使结构和 JS 都对了，视觉上仍可能出问题：
- 固定列和主内容的垂直边框不重合？检查是否所有
table-cell都用了box-sizing: border-box，且border-width完全一致 - Safari 滚动时固定列闪烁或偏移？给固定列容器加
transform: translateZ(0)强制硬件加速 - 伪元素画的分隔线（如
::after { border-right: 1px solid #ccc; }）在滚动中错位？确保其position: absolute的父容器是relative，且top/bottom/left/right计算值不依赖动态布局
最麻烦的从来不是“怎么让列不动”，而是“怎么让不动的列看起来像原本就在那里”。行高、边框、z-index、滚动条占位、硬件加速——少对一环，就露馅。
