HTML表格首行冻结唯一可靠方案是给<th>设position: sticky; top: 0;，需包裹在带overflow-y: auto和定高的div容器中，且必须规范使用<thead>、显式控制列宽；不能作用于<thead>本身，因浏览器不支持其sticky特性。
HTML 原生不支持表格首行冻结（position: sticky 是唯一可行方案），直接用 <thead> + display: block 或 JS 滚动监听都是陷阱，容易破坏语义、键盘导航或表头列宽对齐。
用 position: sticky 冻结 <th> 是最简可靠方案
前提是表格结构规范：必须有 <thead> 包裹 <tr><th>，且父容器需设置 overflow-y: auto 并限定高度。
-
<th>必须设position: sticky; top: 0;，同时加background遮盖滚动内容（否则文字被盖住） - 父容器不能是
<table>自身（它默认是display: table），得套一层<div class="table-container"> - 列宽需显式控制（如
min-width或width），否则滚动时<th>和<td>宽度易错位 - 不兼容 IE，Edge 15+ 和现代 Chrome/Firefox/ Safari 均支持
<div class="table-container">
<table>
<thead>
<tr>
<th>姓名</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr><td>张三</td><td>北京</td></tr>
<!-- 更多行 -->
</tbody>
</table>
</div>.table-container {
max-height: 300px;
overflow-y: auto;
}
table {
width: 100%;
border-collapse: collapse;
}
th {
position: sticky;
top: 0;
background: #fff;
z-index: 1;
min-width: 120px;
}为什么不能给 <thead> 设 position: sticky
多数浏览器不支持对 <thead> 元素直接应用 position: sticky —— 它不是“可粘性元素”，只有 <th>、<td> 等单元格级元素才被规范允许。实测中设在 <thead> 上基本无效，且可能触发渲染异常。
- 错误写法：
thead { position: sticky; top: 0; }→ 表头不动，或整个表格错位 - 正确粒度：只作用于
<th>，每个表头单元格独立粘性 - 若需冻结多行（如前两行），得给对应
<th>分别设top: 0和top: 48px（需计算高度）
用 display: block 强制拆分表头/表体？慎用
这种方案会破坏表格的语义结构和可访问性（屏幕阅读器无法识别行列关系），且列宽同步极难处理——<thead> 和 <tbody> 变成两个独立块后，width: 100% 不再对齐。
立即学习“前端免费学习笔记（深入）”；
- 常见翻车点：拖动横向滚动条时，表头和数据列完全错位
- 修复方式只能靠 JS 监听
scrollLeft同步偏移，但性能差、响应滞后 - 键盘 Tab 导航会跳过表头，
scope属性失效，WCAG 合规性直接不达标 - 仅适合内部管理后台等对无障碍无要求、且数据列数固定的场景
真正麻烦的是列宽自适应与粘性共存——white-space: nowrap、min-width、table-layout: fixed 这几个属性稍调错一个，滚动瞬间就错位。建议先固定列宽再加 sticky，比边调边猜强得多。
