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 计算滚动位置。
关键点：必须给 <th> 设置 <code>top 值，且父容器需有明确高度和 overflow-y: auto；<thead> 本身不参与定位，真正起作用的是内部的 <code><th> 元素。<ul><li><code><table> 外层必须包裹一个带 <code>max-height 和 overflow-y: auto 的容器（比如 <div class="table-container">）<li><code><th> 必须声明 <code>position: sticky; top: 0;，不能只写 sticky 不设 top
<tr> 中的 <code><th> 都要单独设 <code>top，第二行用 top: 40px（假设第一行高 40px）HTML 结构和 CSS 必须这样写才生效
常见错误是把 overflow-y: auto 加在 <table> 上——这会破坏表格布局，导致列宽塌陷。正确做法是用外层 <code><div> 控制滚动区域。<pre class="brush:php;toolbar:false;"><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></pre>
<p>CSS 示例：</p>
<pre class="brush:php;toolbar:false;">.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;
}</pre>
<h3>IE 和旧版 Safari 怎么办</h3>
<p><code>position: sticky 在 IE 完全不支持，旧版 Safari（stickybits 或 sticky-js），它们对表格结构支持差、易触发重排、列宽常错乱。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
更稳妥的降级方案是：用 JS 监听 scroll，动态复制 <thead> 到页面顶部并设 <code>position: fixed，同时给 <tbody> 加 <code>padding-top 避免被遮挡。但要注意：
- 每次滚动都触发
getBoundingClientRect()会卡顿，必须用requestAnimationFrame节流 - 列宽必须显式设置（如
width: 200px或min-width），否则复制的表头和原表头列宽不同步 - 移动端 touch 滚动需额外监听
touchmove，iOS Safari 的scroll事件默认不冒泡
容易被忽略的细节：边框、z-index 和文字截断
表头固定后，常见的视觉问题不是功能失效，而是样式错位：
- 如果用了
border-collapse: collapse，position: sticky的<th> 可能和 <code><tbody> 的 <code><td> 边框重叠——改用 <code>border-collapse: separate并统一设置border-spacing: 0 -
z-index必须设（哪怕只是z-index: 1），否则滚动时表头可能被后续元素（如弹窗、广告）遮盖 - 文字过长时，
white-space: nowrap+overflow: hidden+text-overflow: ellipsis要加在<th> 和 <code><td> 上，否则固定后的表头文字溢出不可控<li>如果表格有横向滚动，<code>position: sticky对left同样有效，但需确保容器有overflow-x: auto且<th> 设 <code>left: 0列宽自适应和固定表头共存时，
table-layout: auto容易导致抖动，建议显式设table-layout: fixed并配合width或min-width控制列。
