colspan和rowspan是“占位+删除”声明而非合并工具：colspan="n"需少写n−1个，rowspan="n"要求后续n−1行对应列彻底留空；混用时被覆盖单元格必须从html中彻底删除，否则dom失真、导出错位。
colspan 和 rowspan 不是“合并”工具，而是“占位+删除”声明——写错一个值，表格结构就静默崩坏，但浏览器不报错、不警告。
colspan="n" 意味着你必须少写 n−1 个 <td>
<p>它不是让单元格“变宽”，而是告诉浏览器：“这个 <code><td> 向右覆盖 n 列，所以本行右侧紧邻的 n−1 个位置，不能再出现任何 <code><td> 或 <code><th>”。
<ul>
<li>表头定义了 4 列，某行却写 <code><th colspan="3">A</th>
<th>B</th>
<th>C</th> → 实际列数变成 5，下一行对不齐
colspan="2" 后跟 <td>X</td>
<td>Y</td>，等于多塞了一列，右侧会整体右移Array.from(tr.children).reduce((s, el) => s + (el.colSpan || 1), 0)，每行结果必须一致rowspan="n" 要求后续 n−1 行对应列彻底留空
rowspan 锁定的是列位置：从当前行起，该列坐标被占用 n 行（含自身），后续 n−1 行里，这个列位置不能有任何节点——<td></td>、<td> </td>、甚至注释都不行。
- 常见翻车：
<tr> <td rowspan="3">Name</td> <td>Alice</td> </tr> <tr> <td>Name</td> <td>Bob</td> </tr>→ 第二行第一个<td> 多写了，边框断裂 <li><code><thead> 里用了 <code>rowspan，<tbody> 第一行对应列也必须跳过，二者列坐标必须对齐 <li>JS 中 <code>row.cells[0]返回undefined？大概率是这里漏删了某个<td> <h3>同时用 <code>colspan和rowspan时，要删光所有被覆盖的单元格比如
<td rowspan="2" colspan="2">汇总</td>，本质是在二维网格里划出一个 2×2 区域——左上角设属性，其余 3 个格子必须从 HTML 中彻底删除，不能留空、不能注释占位。- 错误做法：只改属性，不删节点 → DOM 结构失真，导出 PDF 时纵向错位
- 安全做法：先画草图标出每个单元格的行列坐标和跨度，再逐行书写；重点检查“被跨区域”的行和列是否真的没节点
- 复杂表头中，
<thead> 某行列数 ≠ <code><tbody> 某行列数 → <code>border-collapse: collapse失效，边框断开最危险的地方在于：错位不报错。DevTools 看起来正常，屏幕阅读器读错语义，JS 获取
cells长度异常，打印或 PDF 导出才暴露问题——动手前务必用脚本校验每行真实列数，别信肉眼。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
