直接给<thead>加position: sticky无效，因<thead>的display为table-header-group，不符合CSS规范对sticky元素必须是块级或行内级的要求；真正生效的是<th>元素，需在<th>上设置position: sticky、top: 0，并确保父容器有滚动上下文、<th>有背景色和z-index。
直接给 <thead> 加 position: sticky 没用——浏览器根本不认它，真正要设样式的是里面的每个 <th>，且必须同时满足三个硬性条件，缺一不可。
为什么 <thead> 上写 position: sticky 无效
<thead> 是表格语义容器，display 类型为 table-header-group，不符合 CSS 规范对 sticky 元素“必须是块级或行内级”的要求。浏览器会忽略它的 top 值，只响应 <th> 或 <td> 这类单元格元素。
- 常见错误现象：
<thead style="position: sticky; top: 0">滚动时完全没反应，表头跟着一起动 - Firefox v90 及更早版本对
<th>上的 sticky 支持不稳定，v91+ 才建议直接使用 - 结构必须规范：
<thead><tr><th>...</th></tr></thead>，不能省略<tr>或把<th>提到外面
<th> 上怎么写 position: sticky 才生效
只写 position: sticky; top: 0 远不够。sticky 是“条件触发”行为，不是“绝对定位”，必须靠外部环境配合才能激活。
- 父容器（通常是包裹
<table>的<div>）必须设max-height+overflow-y: auto，否则没有滚动上下文，sticky 不触发 -
<th>必须显式设background-color（不能是transparent或未声明），否则滚动时下方<td>内容会透上来 -
<th>必须设z-index: 1或更高（推荐z-index: 10），否则可能被其他浮动/定位元素压住 -
<tr>不能设overflow: hidden，会剪裁 sticky 元素
列宽错位、表头和数据不对齐怎么办
冻结后第一行和 <tbody> 内容左右错开，90% 是列宽计算不一致导致的。表格布局模型本身不保证列宽同步，尤其内容长度差异大时（比如一列是 “ID”，另一列是长 URL）。
立即学习“前端免费学习笔记（深入）”；
- 必须加
table-layout: fixed到<table>上，强制按 CSS 宽度或首行宽度分配列宽 - 给所有
<th>和<td>显式设width，例如th:nth-child(1) { width: 120px; } - 避免混用
border-collapse: collapse和单元格单独设border，容易导致 sticky 区域宽度偏移 - 别在祖先链任意层级加
transform、filter或will-change，它们会创建新层叠上下文，直接阻断 sticky
IE11 及更旧浏览器怎么处理
position: sticky 在 IE 全系都不支持，包括 IE11。这时候不是加 polyfill 就能解决的，而是要结构降级。
- 把
<thead>和<tbody>拆成两个独立<table>，一个放表头，一个放数据 - 用 JS 监听
resize和scroll，动态同步两表列宽和行高（注意节流，避免 scroll 中重排） - 左表容器设
overflow: hidden，右表容器设overflow-x: auto，通过element.scrollLeft手动控制对齐 - 行高不一致会导致“漂移”，可在 resize 后遍历所有
<tr>，用getBoundingClientRect().height重新对齐
真正麻烦的不是写几行 CSS，而是检查父容器有没有滚动上下文、<th> 有没有背景色和 z-index、列宽有没有被内容撑开——漏掉任何一个，sticky 就静默失效，还查不出原因。
