rowspan和colspan是重写表格结构的声明而非样式控制，错误会导致DOM失真、JS报错、PDF错位等；colspan值必须为正整数且每行总和等于总列数，rowspan会占用后续行对应列位置，同时使用时需彻底删除被覆盖单元格并校验列数平衡。
直接说结论：rowspan 和 colspan 不是“让单元格看起来变大”的样式控制，而是重写表格逻辑结构的声明——写错一个值，DOM 就可能失真，row.cells 返回 undefined，打印 PDF 时纵向错位，React 渲染 tbody 会跳行，而且浏览器完全不报错。
colspan="n" 怎么算才不崩
colspan 不是“加宽”，是“占位”：一个 <th colspan="3"> 表示这个单元格向右连续占据 3 列位置，整行所有 <td> 和 <th> 的 colspan 值加起来，必须等于该表格的总列数（通常由第一行 <th> 数量决定）。
- 表头有 4 列 → 每行所有单元格的
colspan总和必须是 4<th colspan="2">A</th><th>B</th><th>C</th>✅（2+1+1=4）<th colspan="2">A</th><th>B</th><th>C</th><th>D</th>❌（2+1+1+1=5），浏览器会忽略最后一个或补空单元格，DOM 已失真 - 值必须是纯正整数：
colspan="2"有效，colspan="2px"或colspan="two"会被完全忽略 - 常见错误是用
colspan对齐数据行——该用 CSSdisplay: table-cell或 flex 就别硬撑表格
rowspan="n" 为什么会让下一行少写 <td>
rowspan 不是“拉高单元格”，而是“锁定列位置”：从当前行起，接下来 n−1 行里，该列位置被永久占用，后续 <tr> 中对应列不能再出现任何 <td> 或 <th>。
- 例如：
<td rowspan="3">服务器</td><td>CPU</td>在第一行 → 第二、第三行的第 1 列已被占用，这两行只能写<td>内存</td>、<td>硬盘</td>，不能再写两个<td> - 检查公式：该行应有
<td>数 = 总列数 − 当前已被上层rowspan占用的列数 - 典型报错现象：
TypeError: Cannot read property 'cells' of undefined，尤其在 JS 动态插入行后更明显
同时用 rowspan 和 colspan 最常漏掉的三件事
这不是属性叠加，是在二维表格矩阵中划出一个矩形区域：左上角单元格设 rowspan="a" 和 colspan="b"，其余被覆盖的 a×b−1 个格子必须彻底删除——不能留空 <td></td>，也不能用注释占位。
立即学习“前端免费学习笔记（深入）”；
- 删干净：比如
<td rowspan="2" colspan="3">标题</td>覆盖了 5 个格子（2×3−1），其余 5 个位置在 HTML 中必须完全不存在 - 对齐总列数：若第 1 列已被
rowspan占用，则同一行中colspan="3"必须从第 2 列开始算起，整行仍需凑够总列数（例如总列数为 5，已占 1 列，剩下 4 列要靠colspan="3"+<td>= 3+1 实现） - 检查后续两行：改了一个
rowspan="2"，就得立刻确认下面两行各自还剩几个<td>可写——这才是真正难维护的地方，也是多数人卡住的位置
真正难的从来不是第一次写对 colspan="2"，而是在改完第三处 rowspan 后，忘了顺手重算后面两行的单元格数量。
