直接结论：给<th>加position: sticky; top: 0能固定首行，但必须同时满足父容器有max-height和overflow-y: auto、<th>设置background-color和z-index、table-layout: fixed三重条件，否则sticky因缺少滚动上下文或视觉层叠而无法启动。
直接结论：给 <th> 加 position: sticky; top: 0 就能固定首行，但只写这一句大概率失效——必须同时满足父容器滚动上下文、<th> 背景与层级、表格布局三重条件。
为什么 <th> 加了 position: sticky; top: 0 却不粘？
根本不是样式没生效，而是 sticky 没“启动”。它需要一个可滚动的祖先容器来触发行为，而这个容器不能被其他 CSS “拦住”：
- 外层包裹
<div>必须设max-height和overflow-y: auto（scroll或hidden都不行） - 从
<div>到<table>的任意祖先不能有transform、filter、will-change，否则会创建新层叠上下文，中断 sticky -
<thead>本身不能加position: sticky—— 浏览器不认，必须作用在<th>或<td>上 -
<tr>不能设overflow: hidden，会裁剪 sticky 元素
top: 0 生效前必须显式设置的两个关键样式
滚动时 <th> 会叠在 <tbody> 上，没这两项，文字要么透底、要么被盖住：
-
background-color必须是明确值，比如white或#fff；transparent或未声明 = 文字被下方<td>内容干扰 -
z-index至少为1，推荐10起步；否则可能被其他浮动/定位元素压住 - 顺手加个
border-bottom: 1px solid #ddd，避免表头和第一行数据之间视觉断裂
列宽错位、对不齐？table-layout: fixed 是解药
当 <tbody> 滚动而 <thead> 固定时，浏览器可能因内容撑开导致列宽计算偏移。强制统一宽度规则：
立即学习“前端免费学习笔记（深入）”；
- 给
<table>设table-layout: fixed; width: 100% - 为每列的
<th>和<td>显式指定相同宽度，例如：th:nth-child(1), td:nth-child(1) { width: 120px; } - 避免混用
%、fr、auto—— 统一用px或ch更稳 - 如果列数多且宽度不均，可在 JS 中读取第一行
td的offsetWidth，再批量写入th.style.width
IE11 及更旧浏览器怎么办？别试 polyfill
position: sticky 在 IE 全系都不支持，包括 IE11。所谓“兼容方案”不是加 JS 补丁，而是结构级降级：
- 把
<thead>和<tbody>拆成两个独立<table>，用 JS 同步列宽（监听resize和scroll） - 或用
position: absolute+ JS 动态算top，但要防 scroll 中重排，建议节流或用requestAnimationFrame - 现代项目若已放弃 IE，就别引入 polyfill —— 它们大多无法处理表格布局的特殊性，反而引入新 bug
真正容易被忽略的是：sticky 不是“让元素不动”，而是“在滚动上下文中按锚点吸附”。一旦父容器没滚动能力，或者 <th> 缺背景/层级，它就退化成普通定位——看起来像失效，其实是条件没凑齐。
