rowspan和colspan真实改变表格行列结构而非仅视觉合并；rowspan占用列位置与行跨度，后续行单元格数=总列数−被占用列数；colspan必须保证当行总列数对齐，无效值被忽略；同时使用时被覆盖单元格须物理删除。
rowspan 和 colspan 不是“让表格看起来合并了”，而是**真实改变表格的行列结构**——浏览器会据此重新计算单元格坐标。写错一个值，或漏删被覆盖的单元格，tbody 就会错行，JS 拿 row.cells 时直接报 undefined。
rowspan="n" 后面几行的 <td> 数量怎么算？
<p>关键不是“写了多少个 <code><td>”，而是“这行还剩几列可填”。<code>rowspan 占用的是**列位置 + 行跨度**，后续每行的单元格数量 = 总列数 − 当前列已被上层 rowspan 占用的列数。
- 比如总列数是 4，第一行第一个
<td rowspan="3"> 占了第 1 列，那第二、三行就只能放 3 个 <code><td>（对应第 2–4 列）
<li>如果第二行仍写了 4 个 <code><td>，浏览器不会报错，但逻辑上第 1 列被重复定义——<code>row.cells[0] 指向那个 rowspan 单元格，row.cells[1] 才是第二个 <td>，索引错位
<li>打印预览或 PDF 导出时错行，90% 是这个原因：视觉上没看出多，但结构已乱</li>
<h3>colspan="n" 必须保证当行总列数对齐</h3>
<p><code>colspan 是横向“吃掉”右边的列，它不关心下面有没有内容，只管自己这一行占满没。值必须是正整数，colspan="2px" 或 colspan="two" 全部无效，浏览器直接忽略该属性。
- 若总列数为 5，某行第一个
<th colspan="3">，后面只能再放两个单列单元格（如 <code><th>A</th>
<th>B</th>），或一个 <th colspan="2">，不能只放一个 <code><th>
<li>用 <code>colspan 做文字居中撑宽？别。那是 text-align 或 width 的事，硬套只会让表格在 border-collapse: collapse 下边框断裂
- 响应式场景下，
colspan 完全不响应缩放——手机上看仍是横跨 3 列，大概率溢出，得靠媒体查询隐藏列，而不是靠合并“省空间”
同时用 rowspan 和 colspan 时，哪些单元格必须删？
被覆盖区域里的 <td> 或 <code><th> 必须物理删除，不能留空标签，也不能用 <code><td></td> 占位。只要存在，就算作一个有效单元格，破坏行列矩阵。
- 例如：
<td rowspan="2" colspan="2">汇总</td> 覆盖了 2×2=4 个原始格子，那么它下方一行、右侧一列、以及右下角那个位置，都不能再出现任何 <td>
<li>常见错误：写完 <code>rowspan 后，下一行照常写满 <td>，结果第二行多出一个单元格，浏览器自动补空行或错位渲染
<li>调试技巧：打开开发者工具 → 查看 <code>table 的 rows[i].cells.length，逐行比对是否符合预期总数
真正难的不是记住语法，而是每次改一个 rowspan，都得顺手检查它影响的下面两行；每次加一个 colspan，都得当场数清这行还剩几列可填——结构恒定，才是表格能稳住的基础。
<td rowspan="3"> 占了第 1 列，那第二、三行就只能放 3 个 <code><td>（对应第 2–4 列）
<li>如果第二行仍写了 4 个 <code><td>，浏览器不会报错，但逻辑上第 1 列被重复定义——<code>row.cells[0] 指向那个 rowspan 单元格，row.cells[1] 才是第二个 <td>，索引错位
<li>打印预览或 PDF 导出时错行，90% 是这个原因：视觉上没看出多，但结构已乱</li>
<h3>colspan="n" 必须保证当行总列数对齐</h3>
<p><code>colspan 是横向“吃掉”右边的列，它不关心下面有没有内容，只管自己这一行占满没。值必须是正整数，colspan="2px" 或 colspan="two" 全部无效，浏览器直接忽略该属性。
- 若总列数为 5，某行第一个
<th colspan="3">，后面只能再放两个单列单元格（如 <code><th>A</th> <th>B</th>），或一个<th colspan="2">，不能只放一个 <code><th> <li>用 <code>colspan做文字居中撑宽？别。那是text-align或width的事，硬套只会让表格在border-collapse: collapse下边框断裂 - 响应式场景下，
colspan完全不响应缩放——手机上看仍是横跨 3 列，大概率溢出，得靠媒体查询隐藏列，而不是靠合并“省空间” - 例如：
<td rowspan="2" colspan="2">汇总</td>覆盖了 2×2=4 个原始格子，那么它下方一行、右侧一列、以及右下角那个位置，都不能再出现任何<td> <li>常见错误：写完 <code>rowspan后，下一行照常写满<td>，结果第二行多出一个单元格，浏览器自动补空行或错位渲染 <li>调试技巧：打开开发者工具 → 查看 <code>table的rows[i].cells.length，逐行比对是否符合预期总数
同时用 rowspan 和 colspan 时，哪些单元格必须删？
被覆盖区域里的 <td> 或 <code><th> 必须物理删除，不能留空标签，也不能用 <code><td></td> 占位。只要存在，就算作一个有效单元格，破坏行列矩阵。
真正难的不是记住语法，而是每次改一个 rowspan，都得顺手检查它影响的下面两行；每次加一个 colspan，都得当场数清这行还剩几列可填——结构恒定，才是表格能稳住的基础。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
