position: sticky表头不粘主因是滚动上下文被破坏，需同时满足容器（max-height+overflow-y:auto）、层级（z-index≥10）和背景（background-color+background-clip）三个硬条件。
直接用 position: sticky 就能搞定，但写上 top: 0 不一定生效——关键在容器、层级和背景三个硬条件。
为什么 position: sticky 表头不粘？
不是浏览器不支持，而是 sticky 的触发依赖滚动上下文。常见失效原因包括：
-
<table>父容器没设max-height和overflow-y: auto（必须同时存在） -
<tr>上写了overflow: hidden或overflow: clip，直接阻断 sticky 行为 -
<th>没设background-color，滚动时文字被下方<td>内容透出或遮盖 -
z-index缺失或值太小，被<tbody>内容压在下面
thead 还是 th 加 sticky？
推荐直接给 <th> 加样式，而不是 <thead>。原因很实际：
-
<thead>是表格语义容器，本身不参与单元格对齐计算，加sticky后容易列宽错位 -
<th>是实际渲染单元格，top: 0能精准锚定到滚动容器顶部 - 如果用了
border-collapse: collapse，<th>需额外加background-clip: padding-box防止边框裁剪异常
列宽错位怎么避免？
表头和数据列不对齐，90% 是宽度没控住。解决方案很简单：
立即学习“前端免费学习笔记（深入）”；
- 给
<table>加table-layout: fixed，强制按首行定义列宽 - 所有
<th>和对应<td>必须显式设width或min-width（百分比或 px 均可） - 不要依赖内容撑开宽度——
table-layout: auto下 sticky 定位基准会漂移 - 如果列数多且响应式要求高，用
<col>标签统一声明宽度更稳定
IE11 及以下怎么降级？
sticky 在 IE 完全不支持，不能只靠 CSS fallback。必须结构分离 + JS 同步：
- 把
<thead>提到表格外，单独包裹成固定高度的<div> -
<tbody>套进另一个带overflow-y: auto的<div> - 用 JS 监听
scroll和resize，读取第一行<td>宽度，动态赋给对应<th> - 注意：纯 CSS 方案在此场景下不可行，JS 同步逻辑必须包含列宽缓存和防抖
真正难的不是写那行 position: sticky，而是让整个表格结构配合它不“打架”。列宽、容器高度、z-index、背景色，缺一不可——漏掉任意一个，表头就可能半透明、错位或干脆不动。
