使用 position: sticky 可实现表头固定，需设置 top: 0、避免父元素 overflow 限制、提升 z-index 并添加背景色以防止内容透出，配合外层容器支持横向滚动，现代浏览器兼容性良好。
要实现表头固定效果，让表格的表头在页面滚动时始终停留在视口顶部，可以使用 CSS 的 position: sticky 属性。这种方法简单高效，无需 JavaScript，兼容性也较好（现代浏览器普遍支持）。
1. 基本结构和样式设置
确保表格的表头（）中的 注意：父容器不要有 overflow: hidden、overflow: auto 或 transform 等限制 sticky 行为的属性，否则 sticky 可能失效。 示例 HTML 结构： 立即学习“前端免费学习笔记（深入）”； CSS 样式： th {
position: sticky;
top: 0;
background-color: #f0f0f0;
z-index: 10;
border: 1px solid #ccc;
padding: 10px;
} td {
padding: 8px;
text-align: left;
border: 1px solid #ddd;
} 为了让 sticky 正常工作，需要注意以下几点： 对于带横向滚动的长表格，可将 table 包裹在 div 中，并设置外层容器 overflow-x: auto。sticky 依然有效。 table {
min-width: 100%;
border-collapse: collapse;
} 如果使用了 fixed-layout 或固定列宽，也可结合 table-layout: fixed 保持列对齐。 现代浏览器都支持 position: sticky，但老版本 IE 不支持。如需兼容，可考虑： 基本上就这些。只要结构清晰、样式正确，CSS sticky 就能轻松实现表头固定，提升用户体验。不复杂但容易忽略细节。 元素应用了 position: sticky，并指定粘性定位的偏移量（如 top: 0）。
姓名
年龄
城市
张三 25 北京 李四 30 上海
table {
width: 100%;
border-collapse: collapse;
}
2. 关键注意事项
3. 处理复杂表格（多表头或横向滚动）
.container {
overflow-x: auto;
max-height: 400px;
}
4. 兼容性和降级方案
