position: sticky单独用在<th>上不生效，是因为sticky依赖最近的滚动祖先容器，而默认<table>不创建滚动上下文，需外层div设max-height+overflow-y:auto，并确保th有background-color、z-index及table-layout:fixed。
为什么 position: sticky 单独用在 <th> 上不生效？
因为 sticky 的生效依赖于「最近的具有滚动行为的祖先容器」，而默认的 <table> 不会创建新的块级格式化上下文（BFC），也不触发滚动；浏览器会把滚动作用在 <body> 或外层容器上，导致 top / left 失效。
解决的关键是：让表体（<tbody>）自己滚动，并确保 <thead> 和 <th> 的 sticky 定位参考的是这个可滚动区域。
- 必须给
<tbody>设置display: block+max-height+overflow-y: auto - 同时将
<thead>和<tbody>都设为display: block，否则表格内部布局会断裂 -
<th>和<td>也要设为display: table-cell或inline-block来维持列对齐
如何让表头和首列同时冻结？
需要分别控制两个方向的粘性定位：top 冻结表头，left 冻结首列。但二者不能共存于同一个元素——所以得拆开：第一行的每个 <th> 设 top: 0，第一列的每个 <th> 和 <td> 设 left: 0，且它们必须有明确的宽度和 z-index 层级。
- 给所有
<th>加position: sticky; top: 0; background: white; z-index: 10; - 给第一列的单元格（包括
<thead><th>和<tbody><td>）额外加left: 0; z-index: 20; - 必须显式设置
table-layout: fixed，否则列宽会随内容撑开，left粘性错位 - 首列单元格需设
white-space: nowrap防止换行破坏冻结对齐
兼容性与常见错位问题怎么排查？
Firefox 对 sticky 在 <table> 子元素中支持较弱，Safari 在 macOS 旧版本里可能忽略 left；另外，一旦 <tbody> 滚动后，<thead> 的 left 值会被重置为 0（因它不在滚动容器内），所以必须把 <thead> 也放进滚动区——最稳妥做法是整个 <table> 包在 <div class="table-container"> 里，让该 <div> 滚动，再把 <thead> 和 <tbody> 都设为 display: block。
立即学习“前端免费学习笔记（深入）”；
- 检查是否漏了
border-collapse: separate——collapse会让sticky边界计算异常 - Chrome 中若出现「冻结列闪烁或跳动」，大概率是未给
<th>和<td>设置固定width或min-width - 移动端 Safari 可能需要加
-webkit-overflow-scrolling: touch到容器上才能流畅滚动
有没有更轻量、不改 DOM 结构的替代方案？
有，但代价是放弃原生 <table> 语义。用 CSS Grid 模拟表格布局，配合 position: sticky 更可控：
.grid-table {
display: grid;
grid-template-columns: 120px repeat(5, 1fr);
overflow: auto;
}
.grid-row { display: contents; }
.grid-cell { position: sticky; }
.grid-header { top: 0; z-index: 10; }
.grid-first-col { left: 0; z-index: 20; }
这种写法绕过了 <table> 的渲染限制，但要注意：屏幕阅读器支持变弱，打印样式需额外适配，且无法使用 <colgroup> 等原生特性。
真正难的不是写几行 sticky，而是当数据量大、列数多、还要支持导出 Excel 时，冻结逻辑和真实表格结构之间的张力——这时候往往得接受「表头冻结 + 首列虚拟滚动」的混合方案，而不是强求两者都靠 CSS 纯实现。
