position: sticky 是最直接的解法，因其免 JS、原生支持（Chrome 56+/Firefox 59+/Safari 10.1+），且不脱离文档流避免列宽错位；需外层容器设 max-height 和 overflow-y: auto，th 显式设 position: sticky; top: 0; 并配 background-color 与 z-index≥10。
为什么 position: sticky 是最直接的解法
表头固定滚动不需要 JS 框架或复杂监听，现代浏览器（Chrome 56+、Firefox 59+、Safari 10.1+）原生支持 position: sticky。它比 position: fixed 更可靠——不会脱离文档流导致列宽错位，也不依赖 JS 计算滚动位置。
关键点：必须给 常见错误是把 CSS 示例： 实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。 更稳妥的降级方案是：用 JS 监听 表头固定后，常见的视觉问题不是功能失效，而是样式错位： 列宽自适应和固定表头共存时， 设置 top 值，且父容器需有明确高度和 overflow-y: auto； 本身不参与定位，真正起作用的是内部的
元素。 外层必须包裹一个带
max-height 和 overflow-y: auto 的容器（比如 必须声明 position: sticky; top: 0;，不能只写 sticky 不设 top 中的 都要单独设 top，第二行用 top: 40px（假设第一行高 40px）HTML 结构和 CSS 必须这样写才生效
overflow-y: auto 加在 上——这会破坏表格布局，导致列宽塌陷。正确做法是用外层
<div class="table-container">
<table>
<thead><tr>
<th>姓名</th>
<th>邮箱</th>
<th>状态</th>
</tr></thead>
<tbody>
<tr>
<td>张三</td>
<td>zhang@example.com</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: #f8f9fa;
z-index: 10;
}
th, td {
padding: 8px 12px;
border: 1px solid #dee2e6;
}
IE 和旧版 Safari 怎么办
position: sticky 在 IE 完全不支持，旧版 Safari（stickybits 或 sticky-js），它们对表格结构支持差、易触发重排、列宽常错乱。
scroll，动态复制 到页面顶部并设 position: fixed，同时给 加
padding-top 避免被遮挡。但要注意：
getBoundingClientRect() 会卡顿，必须用 requestAnimationFrame 节流width: 200px 或 min-width），否则复制的表头和原表头列宽不同步touchmove，iOS Safari 的 scroll 事件默认不冒泡容易被忽略的细节：边框、z-index 和文字截断
border-collapse: collapse，position: sticky 的 可能和 的
边框重叠——改用 border-collapse: separate 并统一设置 border-spacing: 0z-index 必须设（哪怕只是 z-index: 1），否则滚动时表头可能被后续元素（如弹窗、广告）遮盖white-space: nowrap + overflow: hidden + text-overflow: ellipsis 要加在 和 上，否则固定后的表头文字溢出不可控 position: sticky 对 left 同样有效，但需确保容器有 overflow-x: auto 且 设 left: 0table-layout: auto 容易导致抖动，建议显式设 table-layout: fixed 并配合 width 或 min-width 控制列。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
