使用 position: sticky 可固定表格表头，需确保表头在 thead 中，th 设置 top: 0、背景色和 z-index，且父容器无 overflow 限制，兼容现代浏览器。
要让表格的表头在页面滚动时固定在顶部，可以使用 CSS 的 position: sticky 属性。这种方法简单高效，不需要 JavaScript，适用于大多数现代浏览器。
1. 基本原理：什么是 position: sticky？
position: sticky 是一种相对定位和固定定位的结合体。元素在正常文档流中，直到达到设定的偏移位置（如 top: 0），就会“粘”在视窗的某个位置，像 fixed 一样固定住。
2. 实现表头固定的 HTML 结构
确保你的表格有明确的 <thead> 和 <tbody> 结构：
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
<!-- 更多行数据 -->
</tbody>
</table>
3. 关键 CSS 样式设置
给 <th> 或 <thead tr> 添加 sticky 定位：
立即学习“前端免费学习笔记（深入）”；
table {
width: 100%;
border-collapse: collapse;
}
<p>thead th {
position: sticky;
top: 0;
background-color: #fff;
z-index: 10;
border-bottom: 2px solid #333;
}</p>说明：- top: 0 表示当表头滚动到距离视窗顶部 0px 时开始固定
- background-color 避免下面的内容从表头下方透出来
- z-index: 10 确保表头在其他内容之上
- border-collapse: collapse 防止边框错位
4. 注意事项和常见问题
sticky 要生效，必须满足几个条件：
- 父元素不能有 overflow: hidden 或 overflow: auto，否则会限制 sticky 行为
- sticky 元素必须是块级元素，并且有明确的定位上下文
- 如果表格在外层容器中滚动，sticky 参照的是该容器的视口
- 老版本浏览器（如 IE）不支持 sticky，需考虑兼容性
基本上就这些。只要结构正确、样式清晰，用 CSS sticky 固定表头非常方便，无需复杂代码。实际开发中建议在真实滚动容器中测试效果。
