position: sticky首列固定失效的根本原因是父容器渲染模式破坏定位上下文：需确保table、tbody、tr设display:block，外层容器overflow-x:auto且禁用overflow:hidden/transform，th/td:first-child显式设left:0和z-index:1，并配合table-layout:fixed及明确列宽定义。
现代浏览器下，用 position: sticky 实现首列固定最轻量、无需 JS，但稍不注意就会完全失效——不是代码写错了，而是 DOM 结构或 CSS 层级被隐性破坏了。
为什么 position: sticky 在 <td> 上不生效
<p>常见现象：首列 <code><th> 固定了，但下面所有 <code><td> 都跟着滚动；或者整列压根不动。根本原因是：<code>sticky 的定位上下文受父容器渲染模式限制。
<thead> 和 <code><tbody> 必须都设 <code>display: block，否则 <tbody> 内的 <code><td> 无法脱离表格默认流参与 sticky 计算
<li>包裹 <code><table> 的外层容器必须设 <code>overflow-x: auto，且不能同时对 <table> 或其直接父级设 <code>overflow: hidden 或 transform（会创建新的层叠上下文，切断 sticky 链）
-
left: 0 必须显式加在 th:first-child 和 td:first-child 上，只写 th:first-child 不够——数据行不会继承
-
z-index: 1 要设，且确保它大于其他列的默认堆叠顺序，否则会被右侧列遮盖
table-layout: fixed 是列宽对齐的前提
一旦外层加了 overflow-x: auto，表格常出现列错位、文字换行、首列宽度忽大忽小——这不是 sticky 的问题，而是表格自动布局退化了。
- 必须给
<table> 加 <code>table-layout: fixed，否则浏览器按内容动态计算每列宽度，sticky 定位时 left 偏移量就不可靠
- 用
<colgroup></colgroup> 显式定义每列宽度，比如 <col width="120">；首列建议用像素值，其余列可用百分比
- 避免在
<th>/<code><td> 上混用 <code>width: auto、min-width 或 flex，这些会干扰 fixed 布局的预分配逻辑
- 内容超长时，加
white-space: nowrap; overflow: hidden; text-overflow: ellipsis，防止撑破列宽
兼容老浏览器（IE / Safari
当目标环境包含 IE11 或旧版 Safari，sticky 在 <td> 上基本不可用，必须降级为双表结构：左表仅含首列，右表含其余列，靠 JS 同步横向滚动位置。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>左表容器设 <code>overflow: hidden，右表容器设 overflow-x: auto
- 监听右表容器的
scrollLeft 变化，节流后设置左表容器 scrollLeft = 0（保持不动），视觉上就是“冻结”
- 必须用
element.scrollLeft = value 直接赋值，不要用 animate 或 CSS transition，否则滚动卡顿
-
resize 时要重算每行高度并手动对齐：遍历所有 <tr>，用 <code>getBoundingClientRect().height 设置对应行高，否则左右表错行
- 两表
<tr> 必须严格一一对应，推荐用 <code>data-row-id 绑定索引，而非依赖 DOM 顺序
真正容易被忽略的点是：display: block 加在 <thead>/<code><tbody> 上之后，它们内部的 <code><tr> 会变成块级元素，原本的表格语义丢失——所以必须配合 <code>table-layout: fixed 和显式列宽，否则连基础对齐都做不到。这不是“多加几行 CSS 就行”的事，而是一整套渲染约束的协同生效。
<thead> 和 <code><tbody> 必须都设 <code>display: block，否则 <tbody> 内的 <code><td> 无法脱离表格默认流参与 sticky 计算
<li>包裹 <code><table> 的外层容器必须设 <code>overflow-x: auto，且不能同时对 <table> 或其直接父级设 <code>overflow: hidden 或 transform（会创建新的层叠上下文，切断 sticky 链）
left: 0 必须显式加在 th:first-child 和 td:first-child 上，只写 th:first-child 不够——数据行不会继承z-index: 1 要设，且确保它大于其他列的默认堆叠顺序，否则会被右侧列遮盖
table-layout: fixed 是列宽对齐的前提
一旦外层加了 overflow-x: auto，表格常出现列错位、文字换行、首列宽度忽大忽小——这不是 sticky 的问题，而是表格自动布局退化了。
- 必须给
<table> 加 <code>table-layout: fixed，否则浏览器按内容动态计算每列宽度，sticky 定位时 left 偏移量就不可靠 - 用
<colgroup></colgroup>显式定义每列宽度，比如<col width="120">；首列建议用像素值，其余列可用百分比 - 避免在
<th>/<code><td> 上混用 <code>width: auto、min-width或flex，这些会干扰fixed布局的预分配逻辑 - 内容超长时，加
white-space: nowrap; overflow: hidden; text-overflow: ellipsis，防止撑破列宽 - 监听右表容器的
scrollLeft变化，节流后设置左表容器scrollLeft = 0（保持不动），视觉上就是“冻结” - 必须用
element.scrollLeft = value直接赋值，不要用animate或 CSS transition，否则滚动卡顿 -
resize时要重算每行高度并手动对齐：遍历所有<tr>，用 <code>getBoundingClientRect().height设置对应行高，否则左右表错行 - 两表
<tr> 必须严格一一对应，推荐用 <code>data-row-id绑定索引，而非依赖 DOM 顺序真正容易被忽略的点是：
display: block加在<thead>/<code><tbody> 上之后，它们内部的 <code><tr> 会变成块级元素，原本的表格语义丢失——所以必须配合 <code>table-layout: fixed和显式列宽，否则连基础对齐都做不到。这不是“多加几行 CSS 就行”的事，而是一整套渲染约束的协同生效。
兼容老浏览器（IE / Safari
当目标环境包含 IE11 或旧版 Safari，sticky 在 <td> 上基本不可用，必须降级为双表结构：左表仅含首列，右表含其余列，靠 JS 同步横向滚动位置。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>左表容器设 <code>overflow: hidden，右表容器设 overflow-x: auto
