colspan和rowspan是表格结构声明而非样式属性，错误使用会导致dom静默失真；colspan="n"表示单元格向右占据n列，总和须等于逻辑列数；rowspan="n"则锁定当前列位置共n行，后续行对应列不可再出现单元格。
colspan 和 rowspan 不是样式属性，而是表格结构声明——写错一个值，DOM 就会静悄悄地失真，但浏览器不报错、不警告。
colspan="n" 是占位，不是加宽
它让一个 <td> 或 <code><th> 向右连续占据 <code>n 列位置，整行所有单元格的 colspan 值加起来必须等于该表的“逻辑列数”（通常由第一行 <th> 数量决定）。
<ul>
<li>错误写法：<code>colspan="2px" 或 colspan="two" → 浏览器直接忽略，当没写
<th colspan="2">A</th>
<th>B</th>
<th>C</th>
<th>D</th> → 总和是 5，浏览器可能丢弃最后一个或补空，row.cells 长度已不对<tr> 里对相邻 <code><td> 都设 <code>colspan，比如 <td colspan="2">X</td>
<td colspan="2">Y</td>，结果总列数超限，右侧出现空白列或错位
rowspan="n" 会“锁住”后续行对应列
rowspan 不是拉高单元格，而是从当前行起，锁定该列位置共 n 行（含当前行），后续 n−1 行里，这个列位置不能再出现任何 <td> 或 <code><th>。
<ul>
<li>典型错误：<code><tr>
<td rowspan="3">合计</td>
<td>Q1</td>
</tr> → 下一行必须只写 <tr><td>Q2</td></tr>，不能写 <td>Q2</td>
<td>Q3</td>
Table row has fewer cells than required，基本就是这儿多写了一个 <td>
<li>JS 中访问 <code>row.cells[0] 可能返回 undefined，尤其在动态插入行后——因为被 rowspan 占用的列在 DOM 中根本不存在同时用 rowspan 和 colspan 必须删光被覆盖的单元格
这不是属性叠加，是在二维矩阵里划出一个 a×b 的矩形区域：左上角单元格设 rowspan="a" 和 colspan="b"，其余 a×b−1 个格子必须彻底删除——不能留空 <td></td>，也不能用注释占位。
- 实操验证法：在 Chrome DevTools Elements 面板中右键表格 → “Edit as HTML”，临时删掉可疑
<td> 看是否恢复整齐 <li>逐行统计每行实际渲染的 <code><td>/<code><th> 数量，应为「总列数 − 当前已被上层 <code>rowspan占用的列数」 - React 渲染或打印 PDF 时纵向错位？大概率是漏删了某个
<td>，DOM 结构已不一致 真正麻烦的不是写属性，而是维护“逻辑列数”和“被跨行占用列”的实时一致性。手动画草图标出每个单元格的行列跨度，比靠脑子硬算安全得多。</td>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
