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