直接给 td:first-child 加 position: sticky; left: 0 不生效，是因为缺少可横向滚动的祖先容器和 table-layout: fixed 约束；必须设置 table { table-layout: fixed; width: 100%; }，用 定义列宽，并为首列显式设置 position: sticky、z-index ≥ 10 和 background-color。
为什么直接给 td:first-child 加 position: sticky; left: 0 不生效
不是写法错了，是缺了滚动上下文和布局约束。position: sticky 在表格中不是“写了就粘”，它必须依赖一个可横向滚动的祖先容器，且该容器不能靠内容撑开宽度——否则浏览器压根不触发 sticky 行为。常见现象是：首列一闪而过、滚动时跳动、或完全没反应。
table-layout: fixed 是硬性前提，不是可选项
默认的 table-layout: auto 会让列宽随内容动态计算，导致 sticky 的锚点位置在重排时不断漂移。一旦列宽浮动，left: 0 就找不到稳定参考线。
- 必须显式设置
table { table-layout: fixed; width: 100%; } - 推荐用
<col>标签定义列宽，比在<th> 上写 <code>width更可靠：<col style="width: 150px"> <col style="width: 200px"> - 如果列数多、宽度不确定，
minmax(120px, 1fr)在display: grid中更可控，但那就不是原生<table> 了 <h3>z-index 和 background-color 缺一不可</h3> <p>首列单元格（<code>tbody td:first-child）必须同时满足三个条件才能真正“盖住”右侧内容：定位、层级、遮挡。漏掉任意一个，就会看到文字透出、被后列覆盖、或左上角撕裂。-
position: sticky必须显式声明，不能只写z-index -
z-index值建议 ≥ 10，且需高于其他td（它们默认是z-index: auto） -
background-color必须显式设置（如white或#fff），否则滚动时右侧内容会从下方透上来 - 若同时固定首行，
thead th:first-child要叠加top: 0; left: 0; z-index: 3;，否则会被tbody td:first-child盖住左边
哪些父级样式会直接切断 sticky 滚动链
sticky 的定位依赖完整的滚动上下文链。只要祖先元素用了以下任一属性，sticky 就会彻底失效——不是兼容性问题，是规范行为。
-
transform（哪怕只是transform: translateZ(0)） -
filter（包括blur()、opacity()） -
will-change（尤其will-change: transform） -
overflow: hidden或overflow: clip—— 它们会阻止滚动上下文生成
最稳妥的做法是：包裹表格的容器只设
overflow-x: auto、明确宽高（如max-width: 100%+max-height: 500px），其他样式一律剥离。 -
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
