position: sticky在表格中常失效，因、、默认非格式化上下文边界，需设display: block或改用div+grid/flex模拟布局，并确保滚动容器、table-layout: fixed、z-index与background-color等条件齐备。
为什么 position: sticky 在表格里经常失效？
因为浏览器对 <table> 元素内 <code>sticky 的支持依赖于父容器是否是「格式化上下文边界」——而默认的 <table>、<code><tbody>、<code><tr> 都不是。只有当目标列（如 <code><th> 或 <code><td>）的直接父元素（通常是 <code><tr>）被设为 <code>display: block 时，sticky 才可能生效，但这又会破坏表格语义和自动列宽计算。
- 真正起作用的是：把固定列从原表格中「抽离」，用两个并排的
<div> 模拟左右分区，左侧放固定列（<code>position: sticky+ 显式width），右侧放滚动内容区（overflow-x: auto） - 必须给固定列容器设置
flex-shrink: 0，否则在小屏下会被压缩变形 - 所有列高需靠 JS 同步：监听右侧区域的
scrollLeft，手动更新左侧容器的scrollTop，否则固定列内容会错位 - 固定列所在单元格必须设
min-width和max-width，防止内容撑开后破坏对齐 - 表体区域加
overflow-x: auto，但整个容器要设width: 100%，否则 Grid 列宽会按视口算而非内容宽度
如何用纯 CSS 实现首列固定且保持表头对齐？
不能只靠 thead th:first-child { position: sticky; left: 0; } —— 表头和表体的 <tr> 不在同一 DOM 层级，<code>sticky 无法跨层级对齐。实际做法是把表头和表体拆成两个独立的 <table>，再用 CSS Grid 或 Flex 布局强行对齐列宽。
<ul>
<li>用 <code>grid-template-columns 定义统一列宽（例如 120px 1fr 1fr 150px），分别应用到表头容器和表体容器
React 中动态列数下怎么保证固定列不跳动？
列数变化时，CSS Grid 的 grid-template-columns 重算会导致布局抖动。关键不是「重新渲染表格」，而是「复用旧列宽缓存」。
- 在组件 state 中存一份
columnWidths数组，初始用getBoundingClientRect()测量每列真实宽度，后续列增减只 push/pop 对应宽度值 - 渲染时用
style={{ gridTemplateColumns: columnWidths.map(w => `${w}px`).join(' ') }}，避免 CSS 字符串重建触发重排 - 固定列对应的索引（如
fixedColumnIndex = 0）必须和数据结构强绑定，不能靠index渲染 —— 列排序或隐藏后index会变，导致固定错列
移动端 Safari 下 fixed 列出现模糊或重影怎么办？
这是 WebKit 的已知渲染 bug：当 transform: translateZ(0) 或 will-change: transform 与 sticky 同时存在时，Safari 会对固定元素做错误的图层合成。
- 禁用所有
will-change，改用backface-visibility: hidden触发硬件加速（更稳定） - 给固定列容器加
-webkit-transform: translateZ(0)，但不要加在<td> 上，而是加在外层包裹 <code><div> <li>如果仍有重影，尝试在滚动事件中短暂设 <code>opacity: 0.999再恢复，强制重绘（仅 iOS 15–16 需要）
固定列最难的不是「让它不动」，而是「让它不动的同时，还和其他列严丝合缝、不抢焦点、不挡点击、不放大字体」——这些细节全在滚动同步、宽度冻结、渲染层控制的夹缝里。
