colspan="n"使单元格横跨n列，总和须等于表格列数；rowspan="n"使单元格纵跨n行，后续n−1行对应列必须留空；二者共同作用时需删除被覆盖的所有单元格，否则dom结构失真。
colspan="n" 是占位，不是加宽
它让一个 <td> 或 <code><th> 向右连续占据 <code>n 列位置，整行所有单元格的 colspan 值加起来必须等于表格总列数（通常由第一行 <th> 数量决定）。<br>常见错误：<br>• 写成 <code>colspan="2px" 或 colspan="two" —— 浏览器直接忽略，当没写
• 表头定义了 4 列，某行却写了 <th colspan="2">A</th>
<th>B</th>
<th>C</th>
<th>D</th> → 总和是 5，浏览器会丢弃最后一个或补空，DOM 已失真
• 混用时没重算：比如 <th colspan="3">汇总</th>
<th>时间</th>，这行 colspan 总和是 4，但若其他行只有 3 个普通 <td>，就会错位
<h3>rowspan="n" 会“锁住”后续行对应列</h3>
<p><code>rowspan 不是拉高单元格，而是从当前行起，锁定该列位置共 n 行（含当前行），后续 n−1 行里，这个列位置不能再出现任何 <td> 或 <code><th>。<br>典型翻车场景：<br>• <code><tr>
<td rowspan="3">合计</td>
<td>Q1</td>
</tr> → 下一行必须只写 <tr><td>Q2</td></tr>，不能写 <td>Q2</td>
<td>Q3</td>
• DevTools 里看到边框断裂、文字挤在一起，或者控制台报 Table row has fewer cells than required，基本就是这儿多写了一个 <td>
<br>• JS 中访问 <code>row.cells[0] 可能返回 undefined，尤其在动态插入行后
同时用 rowspan 和 colspan 必须删光被覆盖的单元格
这不是属性叠加，是在二维矩阵里划出一个 a × b 的矩形区域：左上角单元格设 rowspan="a" 和 colspan="b"，其余 a×b−1 个格子必须彻底删除——不能留空 <td></td>，也不能用注释占位。
实操要点：
• 先画草图，标出每个单元格的行列跨度，再写 HTML
• 检查每行实际渲染的单元格数量：应为「总列数 − 当前已被上层 rowspan 占用的列数」
• React 或打印 PDF 时错位，大概率是这里漏删了某个 <td>，DOM 结构已不一致
<h3>浏览器不报错，但结构崩得静悄悄</h3>
<p><code>rowspan 和 colspan 是改写表格逻辑结构的声明，不是样式开关。写错一个值，row.cells 可能返回 undefined，querySelector('table tbody tr') 获取的行数可能和视觉不符，导出 PDF 时纵向错位，但控制台什么也不提示。
最稳妥的验证方式：
• 在 Chrome DevTools Elements 面板中右键表格 → “Edit as HTML”，临时删掉可疑 <td> 看是否恢复整齐<br>• 逐行统计 <code>colspan 总和，对照表头列数
• 对含 rowspan 的单元格，手动向下数 n−1 行，确认对应列位置确实没有 <td></td>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
