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