用 colspan 和 rowspan 合并表头单元格最直接，需从左上角逐行定义，精确匹配覆盖的行列数，确保逻辑列数自洽，避免错位与导出失效。
用 colspan 和 rowspan 合并表头单元格最直接
HTML 表格头部复杂，本质是行列交叉结构，比如“科目”下分“语文”“数学”，而“年级”又横跨所有科目——这种就得靠 colspan（横向合并）和 rowspan（纵向合并）组合控制。不能只靠 CSS 或嵌套 <table>，否则语义错乱、屏幕阅读器无法识别、打印/导出也容易崩。
关键原则：从左上角开始逐行定义，先填满当前行再进下一行；每个 <th> 的 colspan 和 rowspan 值必须精确匹配其实际覆盖的列数和行数。
-
colspan="2"表示该单元格占两列宽度，它右侧的单元格要相应后移 -
rowspan="3"表示该单元格向下延伸三行，后续两行同一列位置不能再放新<th> - 如果某行总列数不等于表格定义的列数（由第一行
<th>+colspan算出），浏览器会自动补空单元格，但这是不可靠的隐式行为，务必手动对齐
常见错误：合并后表体错位或列宽失控
错位通常不是代码写错了，而是没算清“逻辑列数”。例如表头第一行写了 <th colspan="2">成绩</th><th>等级</th>，那这行共 3 列逻辑宽度；第二行就必须也提供 3 列内容（哪怕有些是 <th rowspan="2"> 占位），否则 <tbody> 里的 <td> 会按错误列数解析。
列宽失控多因混合使用 width 属性和 colspan：给一个 colspan="3" 的 <th> 设 width="300"，不代表每列 100px，而是整个合并区域最小宽度为 300px，其他列会重分配剩余空间。
立即学习“前端免费学习笔记（深入）”；
- 调试时打开浏览器开发者工具，检查
<thead>每行的<th>数量是否与逻辑列数一致 - 避免在
<th>上用width，改用<col>标签统一控制各列基准宽度 - 若需等宽列，给
<col>设width="1fr"（现代浏览器支持），或用table-layout: fixed+ 显式width配合
多层嵌套表头时，<thead> 必须包含完整行结构
所谓“多层”，是指视觉上有三层标题（如“学年 → 学期 → 科目”），这需要 <thead> 内至少三行 <tr>。不能把“学年”和“学期”塞进同一行用 rowspan 强撑，否则语义断裂，排序插件（如 DataTables）或 Excel 导出工具会丢数据。
正确做法是让每一层对应一行 <tr>，用 rowspan 让高层标题向下贯通，用 colspan 让低层标题横向归组。例如“2023-2024”跨所有学期，“第一学期”再跨语文/数学两科。
- 第一行
<tr>放最高层级标题，每个都带足够大的rowspan（如 3） - 第二行放中间层，根据分组需要设
colspan，同时rowspan减 1（如 2） - 第三行放最细粒度标题，全部
rowspan="1"，仅用colspan对齐逻辑列数 - 所有
<th>应有scope属性（如scope="col"或scope="row"），辅助可访问性
导出 Excel 或打印时表头重复失效？检查 <thead> 是否被 JS 动态删改
很多前端表格库（如 Handsontable、AG Grid）会接管 <thead> 渲染，或用绝对定位模拟冻结表头，导致原生 HTML 表头结构丢失。这时即使你手写的 colspan/rowspan 完全正确，导出插件看到的 DOM 可能只剩一层扁平 <th>。
验证方法：禁用 JS，直接用纯 HTML 打开页面，看表头是否正常；或者在控制台执行 document.querySelector('thead').innerHTML，确认输出是否含多行 <tr> 和正确的属性。
- 优先用原生
<table>+ CSS 实现冻结（如position: stickyon<th>），避免 JS 重绘表头 - 若必须用库，查文档是否支持“原生表头导出”选项，或手动在导出前用
cloneNode(true)备份原始<thead> - 打印样式表中不要用
display: none隐藏某行<tr>，改用visibility: hidden+height: 0，否则部分浏览器会跳过整行计算
colspan 和 rowspan，而是保持整个表格的列数逻辑自洽——从 <thead> 第一行推导出总列数，再确保每一行、每一层、甚至 <tbody> 的 <td> 都严格对齐这个数字。少一个 colspan，多一个空 <th>，都可能让整张表在某个环节彻底跑偏。 
