position: sticky 在 或 上设 left: 0 失效，是因 w3c 规范禁止其在 display: table-cell 元素上生效；需改用脱离原生表格流的结构（如 div 模拟）或 dom 拆分方案实现固定列。
position: sticky 在 <th> 或 <code><td> 上设 <code>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 模拟表格行为。
<ul><li>别给 <code><table> 直接套 <code>overflow-x: auto 后对 th:first-child 加 sticky——大概率白忙
border-collapse: collapse，固定列边框会和主内容错位，必须切回 separate + border-spacing: 0
table-layout: fixed 是必要前提，否则列宽随内容浮动，left 偏移量无法稳定计算用 sticky 实现单列固定的最小可行方案
前提是：只固定首列（或末列），且不需兼容 Safari 15.3 及更早版本。
核心三要素缺一不可：
- 外层容器设
overflow-x: auto，且有明确宽度（不能是max-content或未设限的width: auto） <table> 必须声明 <code>table-layout: fixed，并配合<col>或首行<th> 显式定义列宽 <li>固定列选择器要覆盖所有行：<code>.my-table th:first-child, .my-table td:first-child，同时加position: sticky; left: 0; z-index: 10; background: white;
示例关键样式：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
.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>：<code>left-fixed（首列）、main-scroll（中间可滚动区）、right-fixed（末列，可选） - 每个
<div> 内部用 <code>display: table+table-row+table-cell模拟表格，绕过原生<table> 的限制 <li>监听 <code>main-scroll.scrollLeft，同步设置left-fixed.scrollLeft = 0和right-fixed.scrollLeft = 0（它们本身不滚动） - 所有三块的行高必须严格一致：统一用
line-height+vertical-align: middle，不能依赖内容撑高 - 固定列和主内容的垂直边框不重合？检查是否所有
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计算值不依赖动态布局
滚动条占位导致底部边框断开？给外层 .table-wrapper 加 padding-bottom: 17px 再用 margin-bottom: -17px 抵消，为滚动条留空间。
容易被忽略的细节：边框对齐与 Safari 渲染抖动
即使结构和 JS 都对了，视觉上仍可能出问题：
最麻烦的从来不是“怎么让列不动”，而是“怎么让不动的列看起来像原本就在那里”。行高、边框、z-index、滚动条占位、硬件加速——少对一环，就露馅。
