position: sticky 是唯一可行的纯css方案，因浏览器原生不支持excel式“冻结窗格”，而它是目前唯一无需js、不破坏表格语义且被现代浏览器稳定支持的定位方式。
为什么 position: sticky 是唯一可行的纯CSS方案
因为浏览器原生不支持类似 Excel 的“冻结窗格”语义，position: sticky 是目前唯一无需 JS、不破坏表格语义、且被现代浏览器（Chrome 56+、Firefox 59+、Safari 14.1+）稳定支持的定位方式。它依赖滚动容器作为定位上下文，不是相对于视口（像 position: fixed），也不是脱离文档流（像 position: absolute），所以能随表格内容自然对齐。但前提是：外层必须有明确的滚动祖先，且不能是 或 —— 否则 sticky 会退化为 static。
必须设置的三层容器结构与关键 CSS
常见错误是直接给 <table> 加 <code>overflow，这无效，因为 <table> 默认是 <code>display: table，不产生块级格式化上下文（BFC）。正确做法是用三层嵌套：
<div class="table-wrapper">：设 <code>overflow: auto或overflow: scroll，这是 sticky 的滚动祖先<div class="table-inner">：仅用于包裹 <code><table>，避免 margin/padding 干扰尺寸计算（可选但推荐）<li><code><table>：保持原生结构，<code><thead> 和 <code><tbody> 必须存在<p>关键样式示例：</p> <pre class="brush:php;toolbar:false;">.table-wrapper { overflow: auto; max-height: 400px; max-width: 800px; } th, td { min-width: 120px; padding: 8px 12px; } /* 表头固定 */ thead th { position: sticky; top: 0; background: #fff; z-index: 10; } /* 首列固定 */ tbody td:first-child, thead th:first-child { position: sticky; left: 0; background: #fff; z-index: 20; } /* 左上角交叉单元格：同时 top 和 left */ thead th:first-child { z-index: 30; }</pre> <h3> <code>z-index层级和背景色不是可选项，而是硬性要求没有
z-index，sticky 元素在滚动时会被后续行/列覆盖；没有显式background，滚动过程中底层内容会从透明区域透出，造成视觉错乱。这不是风格问题，是渲染引擎的层叠规则决定的：-
thead th至少需要z-index: 10，确保高于 tbody 行 -
td:first-child和th:first-child需要更高z-index（如 20），否则会被右侧列遮挡 - 左上角
thead th:first-child必须是最高层级（如 30），否则在右下滚动时会被其他 sticky 单元格压住 - 所有 sticky 单元格必须设
background，哪怕只是background: white或background: inherit
IE 和旧版 Safari 下的现实应对策略
position: sticky在 IE 完全不支持，在 Safari left 失效或触发重绘异常）。如果项目必须支持这些环境，不要尝试 hacksticky，而应切换技术路线：- 用 JS 库如
bootstrap-table的fixedColumns: true+fixedNumber: 1，它通过 DOM 克隆生成独立冻结层 - 手写滚动监听 +
transform: translate()模拟位移，但需同步处理scrollLeft/scrollTop，性能开销明显 - 服务端渲染为多个分离表格（冻结区 + 主体区），用 CSS
position: absolute叠加，牺牲语义换兼容性
真正容易被忽略的是：即使在支持
sticky的浏览器里，如果表格用了border-collapse: collapse，部分浏览器（尤其是 Safari）可能让 sticky 边框错位 —— 此时建议改用border-collapse: separate并手动控制border-spacing。-
