html表格合并单元格本质是删格子：colspan删列、rowspan删行；每行真实列数须一致，且rowspan要求下方同列留空，否则错位。
HTML表格合并单元格不是“加宽加高”，而是手动删格子：用 colspan 删列，用 rowspan 删行；漏删一个 <td>，整张表就错位。
<h3>colspan="n" 后同一行只能再写 (总列数 − n) 个 <code><td>
<p>很多人以为 <code>colspan="3" 是让单元格“变宽”，结果在它后面又写了三个 <td>，导致该行实际列数变成 6，下一行立刻对不齐。
<ul><li>若设计总列数为 5，第一个 <code><td colspan="3"> 占掉 3 列位置，后面最多只能跟 2 个 <code><td>（不是 3 个）
<li>错误写法：<code><tr>
<td colspan="3">A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr> → 实际列数 = 3 + 1 + 1 + 1 = 6
Array.from(tr.children).reduce((s, el) => s + (el.colSpan || 1), 0)，所有 <tr> 必须返回相同数字
<h3>rowspan="n" 要求下一行起同列位置彻底留空</h3>
<p>写了 <code>rowspan="2" 就等于告诉浏览器：“这格吞掉正下方那一格”，所以下一行、同一列不能有任何 <td> 或 <code><th> —— 浏览器不会跳过，它会把那个节点当新列渲染，表格直接裂开。
<ul><li><code><thead> 和 <code><tbody> 是独立容器，但列坐标必须对齐：如果 <code><thead> 里用了 <code>rowspan="2"，<tbody> 第一行对应列也必须跳过
<li>典型反例：<code><tr>
<td rowspan="2">Name</td>
<td>Alice</td>
</tr>
<tr>
<td>Name</td>
<td>Bob</td>
</tr> ❌ 第二行第一个 <td> 必须删掉
<li>调试时，在开发者工具中选中合并单元格，看 box model 是否跨行；再检查 DOM 中下一行同列是否真为空节点</li>
<h3>同时用 colspan 和 rowspan 时，行列总数必须双重校验</h3>
<p>二维合并（比如 <code>colspan="2" rowspan="3"）会让结构变成隐式二维数组，稍一疏忽整张表就偏移。这不是属性冲突，是你改了网格坐标却没同步清理周边。
- 先按列总数校验每一行：
colSpan总和必须一致 - 再按行总数校验每一列：遍历所有
<tr>，统计每个列索引上出现的 <code>rowSpan覆盖情况，确保每列总行数一致 - 嵌套表格是绕过原生限制的可行方案，但仅限真正复杂场景：外层
<td colspan="2"> 包裹一个内层 <code><table>，内部再独立做合并逻辑 <p>最易被忽略的是：表格结构一旦开始合并，就不再是“所见即所得”的线性排列，而是一张需要手动维护坐标的网格图。哪怕只多写一个 <code><td>，或少删一个空位，都会让后续所有行列计算失效。</td>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
