直接给 加 position: sticky 无效，因原生表格单元格缺乏块级定位上下文；需同时设置 table-layout: fixed 和外层 overflow-x: auto，并为固定列显式声明 background-color 与 z-index。
为什么直接给 <th> 加 <code>position: sticky 没反应
不是你写错了，是浏览器根本没打算让它生效。原生 <table> 的渲染机制决定了：<code><tr> 默认是 <code>display: table-row，<td> 是 <code>display: table-cell，它们都不是块级定位容器——而 position: sticky 要求最近的**块级祖先容器**提供滚动上下文，这个条件在标准表格结构里天然不满足。Safari 旧版本、IE 完全不支持；Chrome/Firefox 新版虽部分支持，但行为不稳定，容易出现“滚动时闪一下就消失”“第二列直接盖住首列”等问题。
table-layout: fixed 和外层容器必须同时存在
只设 table-layout: fixed 不够，只设外层 overflow-x: auto 也不够，二者缺一不可：
-
table-layout: fixed强制表格按设定列宽（或首行<th> 宽度）分配空间，避免内容撑开导致 <code>left: 0计算偏移 - 外层容器（如
<div class="table-container">）必须设 <code>overflow-x: auto，且不能是display: table或inline元素——否则滚动上下文被截断 <table> 本身要加 <code>display: block和min-width: max-content，让它脱离表格格式化上下文，才能被父容器约束宽度- 所有固定列单元格（
<th> 和对应列的每个 <code><td>）都得加 <code>position: sticky; left: 0，漏一个就会错位固定列必须带
background-color和z-index没背景色 + 没层级，等于没固定：
-
background-color不是可选项，是遮盖右侧滚动内容的刚需——否则你会看到后面的文字从固定列底下透出来 -
z-index: 10（或至少大于 1）必须显式设置，否则默认层叠顺序下，右侧列会盖住固定列 - 不要依赖继承或默认值，
z-index在sticky元素上必须写死，且确保其父容器没有overflow: hidden（会剪裁粘性效果） - 移动端建议加
-webkit-overflow-scrolling: touch提升 iOS 滚动流畅度
真正稳的方案：放弃原生
<table>，用 <code>div+flex模拟当表格列数多、行数超 500、还要兼容 Safari 14 或需响应式堆叠时，原生表格的 sticky 就是定时炸弹。此时最省心的做法是换结构：
- 用
<div class="table-wrapper"> 包裹，设 <code>overflow-x: auto - 内部用
display: flex模拟行（.row），每列用flex: 0 0 120px控制宽度并禁止缩放 - 首列加
position: sticky; left: 0; z-index: 10; background: white，其余列保持默认流式布局 - 语义弱了，但 DOM 可控、样式可预测、滚动不卡顿、无障碍可通过
role="grid"补齐
复杂点不在怎么写 sticky，而在怎么让浏览器老老实实按你预期渲染——原生表格的“语义正确”在滚动场景下常常是性能与兼容性的反向指标。
-
