最直接有效的方式是用 position: sticky 配合带高度限制的滚动容器实现固定表头；需外层 div 设 height 和 overflow-y: auto，th 设 position: sticky、top: 0，并用 table-layout: fixed 与 col 定义列宽确保对齐。
最直接有效的方式是用 position: sticky 配合带高度限制的滚动容器，不需要 JavaScript 就能实现稳定、语义清晰的固定表头和纵向滚动。
核心结构：包裹 + 限制高度
原生 <table> 本身不支持内部滚动，必须在外层加一个有明确高度的容器，并设置纵向滚动：
<ul><li>用 <code><div class="table-container"> 包裹整个 <code><table>
<li>给容器设固定高度（如 <code>height: 400px）和 overflow-y: auto
overflow: hidden，否则会阻断 sticky 行为表头固定：只加两行 CSS
<thead> 或每个 <code><th> 都可设 <code>sticky，推荐作用在 <th> 上更可控：
<ul>
<li><code>th { position: sticky; top: 0; background: #fff; z-index: 2; }
<th> 的父元素（即 <code><tr> 和 <code><thead>）没有触发新的层叠上下文（避免 <code>transform、filter 等）
box-sizing: border-box 防止高度计算偏差列宽对齐：防止错位的关键
滚动时列错位，90% 是列宽没锁死。解决方法很明确：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 给
<table> 设 <code>table-layout: fixed - 为每一列用
<col>或<colgroup></colgroup>显式定义宽度（如<col width="120">） - 所有
<th> 和 <code><td> 不要依赖内容撑开宽度，否则 <code>fixed失效兼容性兜底（IE11 或旧 Safari）
如果必须支持不支持
sticky的浏览器，改用双表格分离结构：- 上方一个独立
<table> 只放表头 <li>下方一个 <code><div> 包裹另一个 <code><table> 放数据，设 <code>height和overflow-y: auto - 两个表格用相同
<colgroup></colgroup>同步列宽，必要时用 JS 监听滚动并同步横向偏移
- 上方一个独立
