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