position: sticky 是唯一可行的纯CSS方案，因浏览器原生不支持Excel式“冻结窗格”，而它是目前唯一无需JS、不破坏表格语义且被现代浏览器稳定支持的定位方式。
为什么 position: sticky 是唯一可行的纯CSS方案
因为浏览器原生不支持类似 Excel 的“冻结窗格”语义，position: sticky 是目前唯一无需 JS、不破坏表格语义、且被现代浏览器（Chrome 56+、Firefox 59+、Safari 14.1+）稳定支持的定位方式。它依赖滚动容器作为定位上下文，不是相对于视口（像 position: fixed），也不是脱离文档流（像 position: absolute），所以能随表格内容自然对齐。但前提是：外层必须有明确的滚动祖先，且不能是 <body> 或 <html> —— 否则 sticky 会退化为 static。
必须设置的三层容器结构与关键 CSS
常见错误是直接给 <table> 加 overflow，这无效，因为 <table> 默认是 display: table，不产生块级格式化上下文（BFC）。正确做法是用三层嵌套：
-
<div class="table-wrapper">：设overflow: auto或overflow: scroll，这是 sticky 的滚动祖先 -
<div class="table-inner">：仅用于包裹<table>，避免 margin/padding 干扰尺寸计算（可选但推荐） -
<table>：保持原生结构，<thead>和<tbody>必须存在
关键样式示例：
.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;
}
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 失效或触发重绘异常）。如果项目必须支持这些环境，不要尝试 hack sticky，而应切换技术路线：
- 用 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。
