position: sticky在td/th上失效是因浏览器限制只支持top/bottom，left/right被忽略；可靠方案是改用display: table的div结构并设sticky于第一列div，或用JS模拟。
table里给第一列td/th加position: sticky; left: 0没生效
根本原因是table元素本身不创建新的层叠上下文（stacking context），且sticky在table-cell上受限制：浏览器对position: sticky在td、th上的支持非常有限，尤其在Chrome和Firefox中，left/right值几乎总是被忽略——只认top/bottom。这不是写法错，是规范和实现双重限制。
- 必须把
sticky用在th或td的**父容器**上（即tr），且该tr需包裹在有明确overflow-x: auto的容器里 -
table本身不能设overflow，否则会破坏表格布局；得用外层div套住并设overflow-x: auto -
sticky生效的前提是滚动容器有明确高度/宽度约束，否则无法触发“粘性”判断
真正能用的方案：用display: block模拟表格结构
放弃原生table标签，改用div + display: table系列属性，让第一列的div可独立设position: sticky。这是目前兼容性最好、行为最可控的做法。
- 外层
div设display: table; width: 100%; table-layout: fixed - 每行用
div设display: table-row，列用div设display: table-cell - 第一列的
div额外加position: sticky; left: 0; background: white; z-index: 1 - 注意必须显式设置
width（如width: 120px）给第一列，否则sticky区域可能塌缩
<div class="table">
<div class="row">
<div class="cell sticky-col">固定列</div>
<div class="cell">数据1</div>
<div class="cell">数据2</div>
</div>
</div>
如果非要用原生table，只能靠JS补位
纯CSS走不通时，唯一可靠路径是监听滚动，动态修改第一列th/td的transform: translateX()或left值，配合position: absolute脱离文档流。但要注意：这不是“粘性”，是模拟，且必须手动处理表头/表体对齐、resize重算、焦点/选中态丢失等问题。
- 用
getBoundingClientRect()实时读取第一列位置，再根据scrollLeft反向偏移 - 第一列需设
position: absolute，父table设position: relative - 必须监听
scroll事件，但别直接绑定在table上——得绑在外层滚动容器上 - 移动端要注意
passive: false，否则iOS Safari可能禁用preventDefault
容易被忽略的细节：z-index和背景色
即使sticky生效了，第一列也可能被右侧内容遮挡，因为sticky元素默认z-index为auto，不自动提升层级。
-
z-index必须设为具体数字（如z-index: 2），不能是auto或initial - 第一列必须有显式
background-color，否则滚动时会透出后面的内容（尤其当表格有斑马纹时） - 如果表格有
border-collapse: collapse，sticky列的边框可能断裂，建议改用border-spacing: 0+ 单独控制border - 不要依赖
th的默认font-weight: bold来区分——它可能被sticky层叠顺序影响而视觉弱化
CSS里position: sticky在表格单元格上不是“写不对”，是“不能这么写”。真要固定第一列，就得换结构、加背景、控层级，或者接受JS兜底。没有银弹，只有取舍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
