明确分离 与 是实现表头固定、内容滚动及动态排序的基础，需手动写出而非依赖浏览器自动补全，确保 javascript 能精准操作 dom 并保持语义化和可访问性。
通过将表格的 <thead> 与 <code><tbody> 明确分离，可以实现表头固定、内容区域独立滚动，并为动态排序提供清晰的 DOM 结构基础。关键不在于标签本身有“滚动”或“排序”能力，而在于这种结构让 JavaScript 更容易精准操作数据与视图。
<h3>确保语义化结构：thead 和 tbody 必须显式存在</h3>
<p>HTML5 允许省略 <code><thead> 和 <code><tbody>，浏览器会自动补全，但动态控制时必须手动写出——否则 JS 无法可靠定位和替换内容区域。
<ul>
<li>✅ 正确写法：<br><font size="2"><table>
<br>
<thead><tr>
<th>姓名</th>
<th>年龄</th>
</tr></thead>
<br>
<tbody><tr>
<td>张三</td>
<td>28</td>
</tr></tbody>
<br>
</table></font>
</li>
<li>❌ 避免仅用 <code><table>
<tr><th>...</th></tr>
<tr><td>...</td></tr>
</table> —— 浏览器虽渲染正常，但 JS 查询 document.querySelector('tbody') 会失败或返回 null。
实现固定表头 + 滚动 tbody：CSS 控制高度与溢出
给 <tbody> 容器设置固定高度和垂直滚动，同时确保 <code><thead> 不随内容滚动。
<ul><li>给 <code><table> 设置 <code>display: block 或直接对 <tbody> 包一层 <code><div class="scroll-area">（更推荐）；
<li><code><tbody> 外层 div 设置：<br><font size="2">max-height: 300px;<br>overflow-y: auto;<br>overflow-x: hidden;</font>
<li>保证 <code><thead> 与 <code><tbody> 列宽一致（可用 <code>table-layout: fixed + 给 <th>/</th>
<td> 设 width），避免滚动时错位。
<h3>绑定点击事件实现列排序：只重绘 tbody，不动 thead</h3>
<p>排序逻辑处理数据数组，然后清空并重新生成 <code><tbody> 的 <code><tr>，<code><thead> 保持不变。
<ul><li>为每个 <code><th> 添加 <code>data-sort-key="name" 属性，标识对应字段；
Array.prototype.sort() 对原始数据排序；tbody.innerHTML = sortedData.map(...).join('') 或 documentFragment 批量插入新行 —— 避免逐行 appendChild 影响性能；<th> 上添加 class（如 <code>sorted-asc）显示箭头图标。
注意事项与常见问题
-
不要用 innerHTML 替换整个 table：会丢失事件监听、表单状态、已聚焦元素等；只更新
<tbody> 内容即可； <li> <strong>滚动条位置重置</strong>：每次重绘 <code><tbody> 后，外层滚动容器的 <code>scrollTop = 0，如需保持位置需手动记录并恢复； -
无障碍支持：为可排序列添加
aria-sort="ascending"等属性，并在切换时更新，方便读屏软件识别； -
大数据量优化：若行数超千级，考虑虚拟滚动（只渲染可视区域行），此时仍依赖
<thead>/</thead> <tbody> 分离来固定表头。 </tbody>
