跨行跨列合并本质是逻辑占位，需严格跳过对应td/th：rowspan="n"要求下n-1行同列不写单元格，colspan="n"要求同行右侧n-1列不写单元格，否则dom结构错乱导致导出、读屏及js遍历异常。
直接说结论：跨行跨列合并不是“拉伸视觉”，而是用 rowspan 和 colspan 声明逻辑占位，后续行或列必须主动跳过对应位置的 td/th，否则结构就垮了。
rowspan="n" 要求下一行同一列不能出现 td/th
很多人写完 rowspan="2" 后，在下一行还照常写 <td>内容</td>，结果表格错位、JS 读取 table.rows[1].cells.length 比上一行少、导出 Excel 合并失效——问题就出在这里。
-
rowspan="2"表示当前单元格向下覆盖 1 个位置（共占 2 行），**第二行同一列必须不写任何td或th** - 浏览器不会报错，但 DOM 中该列实际缺失一个单元格，
cells数组长度变短，cellIndex不连续 - 若在
thead中用rowspan跨到tbody，HTML 规范不支持，浏览器会自动补空td，导致结构已损坏 - 动态生成时建议提前算好跨行数再写入，别依赖 JS 后续修正；
rowspan="0"无效，会被当成rowspan="1"
colspan="n" 要求同行右侧 n−1 个位置跳过 td/th
colspan="3" 不是“让这个格子变宽三倍”，而是“它向右吞掉右边两个格子”，所以同一行后续不能再写这两个位置的 td。
- 第一行写了
<th colspan="3">2024年</th> <th colspan="3">2023年</th>，加上左侧<th rowspan="2">项目</th>，整行逻辑列数是 1 + 3 + 3 = 7 - 第二行就必须严格提供 7 个
th（哪怕有些是空的），否则浏览器悄悄补空单元格，cells.length变成 7，但 JS 遍历时可能越界 -
colspan超过实际列数（如定义 4 列却写colspan="6"）会被静默截断，右边留白，响应式下更明显 - 检查方法：用
Array.from(tr.children).reduce((sum, td) => sum + (td.colSpan || 1), 0)校验每行总列数是否一致
同时用 rowspan 和 colspan 容易踩坑的位置
同一个 td 同时设 rowspan="2" colspan="2" 看似简单，但实际影响的是 2×2 的逻辑区块，后续两行每行都要跳过两个列位置——稍一遗漏，整个表格列基准偏移。
- 不要在带
rowspan的行后面紧接大colspan，容易因前面漏写单元格导致跨列区域“歪掉” - 开发者工具 Layout 面板出现 “Collapsed cells” 警告，基本就是某处没跳过该写的
td - 避免在
thead用rowspan的同时，tbody第一行又用colspan，二者叠加会让列对齐逻辑脱节 - 嵌套
table必须完整写在td或th里，直接丢进tr下会被浏览器踢出结构，document.querySelector('.nested')返回null
导出 Excel 或屏幕阅读器失效的根本原因
Office 和主流屏幕阅读器都不解析 CSS，只认 DOM 结构。只要 rowspan/colspan 导致逻辑列数不一致，导出就丢合并、读屏就断语义。
- 导出前务必用真实数据测试：打开生成的 HTML，在 Excel 中另存为 .xlsx，看合并是否保留
- 可访问性差不只是体验问题：
<th scope="row"> 关联失效后，视障用户根本无法理解某行数据属于哪个主项 <li>复杂报表优先考虑用 <code>headers属性显式绑定表头与数据单元格，而不是靠视觉跨行 - 真要动态结构，CSS Grid 或 Flex 更可控，
rowspan维护成本远高于表面看起来的几行代码
最麻烦的不是写错属性，而是错位后 DOM 看不出异常，只有 JS 遍历、导出、读屏时才暴露——建议每次加 rowspan 或 colspan 后，立刻检查 table.rows[i].cells.length 是否全行一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
