rowspan和colspan是重写表格结构的声明而非样式控制，错误会导致dom失真、js报错、pdf错位等；colspan值必须为正整数且每行总和等于总列数，rowspan会占用后续行对应列位置，同时使用时需彻底删除被覆盖单元格并校验列数平衡。
直接说结论：rowspan 和 colspan 不是“让单元格看起来变大”的样式控制，而是重写表格逻辑结构的声明——写错一个值，DOM 就可能失真，row.cells 返回 undefined，打印 PDF 时纵向错位，React 渲染 tbody 会跳行，而且浏览器完全不报错。
colspan="n" 怎么算才不崩
colspan 不是“加宽”，是“占位”：一个 <th colspan="3"> 表示这个单元格向右连续占据 3 列位置，整行所有 <code><td> 和 <code><th> 的 <code>colspan 值加起来，必须等于该表格的总列数（通常由第一行 <th> 数量决定）。
<ul>
<li>表头有 4 列 → 每行所有单元格的 <code>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 对齐数据行——该用 CSS display: table-cell 或 flex 就别硬撑表格rowspan="n" 为什么会让下一行少写
rowspan 不是“拉高单元格”，而是“锁定列位置”：从当前行起，接下来 n−1 行里，该列位置被永久占用，后续 <tr> 中对应列不能再出现任何 <code><td> 或 <code><th>。
<ul><li>例如：<code><td rowspan="3">服务器</td>
<td>CPU</td> 在第一行 → 第二、第三行的第 1 列已被占用，这两行只能写 <td>内存</td>、<td>硬盘</td>，不能再写两个 <td>
<li>检查公式：该行应有 <code><td> 数 = 总列数 − 当前已被上层 <code>rowspan 占用的列数
典型报错现象：TypeError: Cannot read property 'cells' of undefined，尤其在 JS 动态插入行后更明显
同时用 rowspan 和 colspan 最常漏掉的三件事
这不是属性叠加，是在二维表格矩阵中划出一个矩形区域：左上角单元格设 rowspan="a" 和 colspan="b"，其余被覆盖的 a×b−1 个格子必须彻底删除——不能留空 <td></td>，也不能用注释占位。
anything-to-html
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
下载
- 删干净：比如
<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 实现）
<li>检查后续两行：改了一个 <code>rowspan="2"，就得立刻确认下面两行各自还剩几个 <td> 可写——这才是真正难维护的地方，也是多数人卡住的位置
<p>真正难的从来不是第一次写对 <code>colspan="2"，而是在改完第三处 rowspan 后，忘了顺手重算后面两行的单元格数量。
rowspan 不是“拉高单元格”，而是“锁定列位置”：从当前行起，接下来 n−1 行里，该列位置被永久占用，后续 <tr> 中对应列不能再出现任何 <code><td> 或 <code><th>。
<ul><li>例如：<code><td rowspan="3">服务器</td>
<td>CPU</td> 在第一行 → 第二、第三行的第 1 列已被占用，这两行只能写 <td>内存</td>、<td>硬盘</td>，不能再写两个 <td>
<li>检查公式：该行应有 <code><td> 数 = 总列数 − 当前已被上层 <code>rowspan 占用的列数
TypeError: Cannot read property 'cells' of undefined，尤其在 JS 动态插入行后更明显同时用 rowspan 和 colspan 最常漏掉的三件事
这不是属性叠加，是在二维表格矩阵中划出一个矩形区域：左上角单元格设 rowspan="a" 和 colspan="b"，其余被覆盖的 a×b−1 个格子必须彻底删除——不能留空 <td></td>，也不能用注释占位。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 删干净：比如
<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 实现） <li>检查后续两行：改了一个 <code>rowspan="2"，就得立刻确认下面两行各自还剩几个<td> 可写——这才是真正难维护的地方，也是多数人卡住的位置 <p>真正难的从来不是第一次写对 <code>colspan="2"，而是在改完第三处rowspan后，忘了顺手重算后面两行的单元格数量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
