复杂行列合并本质是手动管理网格坐标：colspan删列、rowspan删行，漏删必错位；每行列总数与每列行总数须严格一致，否则导致表格错位、读屏乱序。
直接说结论：复杂行列合并不是加属性就能完事，本质是手动管理网格坐标——colspan要删列，rowspan要删行，漏删必错位。
colspan="n" 不是加宽，是删掉后面 n−1 个 <td>
<p>很多人写完 <code>colspan="3"，还在同一行里继续写三个 <td>，结果整行多出两列，下一行立刻对不齐。
<ul>
<li>
<code>colspan="3" 表示“这个单元格覆盖本该存在的 3 个独立单元格”，不是“让它变宽”
<td colspan="3"> 后，**只能再写 2 个 <code><td>**（不是 4 个）
<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><td> 当作新列渲染。
<ul><li>
<code>rowspan="2" 意味着“本格吞掉正下方那一格”，所以下一行、同一列**不能有任何 <td> 或 <code><th>**
<li><code><thead> 和 <code><tbody> 是独立容器，但列坐标必须对齐：如果 <code><thead> 里用了 <code>rowspan，<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"）会让结构变成隐式二维数组，稍一疏忽整张表就偏移。这不是属性冲突，是你改了网格坐标却没同步清理周边。
- 先画草图标出每个单元格的起始行列、跨度，再编码——别靠脑子硬算
- 每一行的列总数要一致；每一列的行总数也要一致（尤其跨
<thead>/<code><tbody> 时） <li>如果合并区域右下角卡在 <code><tbody> 开头，注意 <code><tbody> 首行被 <code>rowspan占用的列，不能再补<td> <li>常见陷阱：合并单元格右下角刚好落在 <code><tbody> 第一行第一列，但忘了这一列在 <code><thead> 已被 <code>rowspan占用，导致<tbody> 首行少一列 <p>最易被忽略的是可访问性与响应式断裂——<code>colspan/rowspan不会自动适配屏幕缩放，也不提供语义层级，屏幕阅读器依赖这些属性推断结构，一旦行列总数校验失败，读屏会完全乱序。复杂布局建议优先考虑display: grid或语义化分组，表格只用于真正二维数据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
