position: sticky固定表头需同时满足三个硬条件：父容器设max-height+overflow-y:auto创建滚动上下文、th必须设置显式background-color和z-index≥1、table需用table-layout:fixed配合col或th/td显式列宽，缺一则错位或失效。
局部滚动容器里固定表头，position: sticky 是首选，但必须满足三个硬条件：滚动上下文、显式背景色、足够 z-index——缺一就会“粘不住”或“错位”。
为什么 position: sticky 在局部滚动里不生效
根本不是浏览器不支持，而是 sticky 依赖最近的、具备滚动能力的祖先容器提供上下文。表格自身（<table>）不创建滚动上下文，所以直接给 <th> 加 position: sticky 无效，除非外层有正确配置的容器。
- 错误写法：
<table style="max-height: 300px; overflow-y: auto;"><thead><tr><th style="position: sticky; top: 0">...——<table>的overflow不触发滚动上下文 - 正确写法：用
<div class="table-container" style="max-height: 300px; overflow-y: auto;"><table>...</table></div> - 容器不能有
transform、filter或will-change，否则会截断sticky行为 -
overflow-y必须是auto（不能是scroll、hidden或visible）
th 上加 sticky 必须配齐哪三样
只写 position: sticky; top: 0 会出问题：文字透出、被遮挡、列宽漂移。以下三项缺一不可：
-
background-color：必须是明确值（如#fff），不能是transparent或未声明；否则滚动时下方<td>内容会透上来 -
z-index：至少为1，推荐10起步；尤其当表格在 Modal、Tooltip 等层叠环境中时，z-index过低会被压住 -
table-layout: fixed+ 显式列宽：给<table>加该属性，并通过<col>或每个<th>/<td>设置width（如width: 120px），否则列宽在滚动中不同步
列宽对不齐？别信“内容撑开”，要控死宽度
表头和数据列错位，90% 是宽度没控住。默认 table-layout: auto 下，sticky 的 <th> 和滚动中的 <td> 渲染阶段不同，宽度计算脱节。
立即学习“前端免费学习笔记（深入）”；
- 禁用靠内容自适应：删掉所有未设宽的
<th>和<td>，不写width就等于放弃对齐 - 优先用
<colgroup>统一声明列宽，例如：<col width="150"><col width="100"><col>，且<th>和对应<td>必须保持一致 - 如果列数多或需响应式，
min-width比width更灵活，但依然要显式设置 - 注意
border-collapse: collapse下，<th>需加background-clip: padding-box防止边框被裁剪异常
IE11 及更老浏览器怎么降级
position: sticky 在 IE 完全不支持，纯 CSS fallback 不可行。必须结构分离 + JS 同步列宽：
- 把
<thead>提到表格外，单独包裹进一个固定高度的<div> -
<tbody>套进另一个带overflow-y: auto的<div> - 用 JS 监听
scroll和resize，读取第一行<td>的offsetWidth，动态赋给对应<th> - 务必加入防抖（debounce）和列宽缓存逻辑，否则频繁重排影响性能
真正难的不是写那行 position: sticky，而是让整个表格结构配合它不“打架”——漏掉 background-color、z-index、table-layout 中任意一个，表头就可能半透明、错位或干脆不动。
