rowspan必须写在跨行区域最上方单元格的或中，且后续被跨行的行须跳过对应列的
rowspan必须写在起始单元格的<td>里
<p>跨行合并不是“选中多行再点合并”，而是由某个单元格主动声明：“我往下占N行”。这个声明只能写在**它自己所在的<code><td>或<code><th>标签里**，且必须是该跨行区域最上方那个单元格。
<p>常见错误是把<code>rowspan="2"写在第二行的<td>里——此时第一行该列已被占满，浏览器直接忽略，视觉上毫无变化。
<ul>
<li>正确：<code><tr>
<td rowspan="2">姓名</td>
<td>张三</td>
</tr>
<tr>
<td>姓名</td>
<td>张三</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>数学</td>
</tr>（第一行已占位，第二行再设无效）被跨过的行必须跳过对应列的<td>
<p><code>rowspan不会自动“删除”下面的单元格，它只是告诉浏览器：“这一列位置我占了，你别再画”。如果后续行还照常写<td>，就会多出一列，导致整行错位、内容重叠或列头对不齐。
<p>比如第一行<code><td rowspan="3">A</td>
<td>B1</td>，那么第二、三行的<tr>里**不能出现左列的<code><td>**，只保留右列内容：
<pre class="brush:php;toolbar:false;"></pre>
<table border="1">
<tr>
<td rowspan="3">A</td>
<td>B1</td>
</tr>
<tr><td>B2</td></tr>
<tr><td>B3</td></tr>
</table>
<ul>
<li>漏掉跳过 → 表格列数计算错误，<code>document.querySelector('tr:nth-child(2) td:nth-child(1)')可能选到错误元素
<tr>下实际渲染的<code><td>数量，比肉眼数 HTML 更可靠
<h3>
<code>rowspan值必须是正整数，不能为0或字符串
rowspan="0"在规范里无效，Chrome、Firefox 都会当rowspan="1"处理；rowspan="2.5"或rowspan="two"会被忽略。动态生成时尤其要注意：
- JS 中计算出的值必须是数字类型，不要用
String(num)包装后塞进属性 - 避免逻辑漏洞导致
rowspan="-1"或rowspan="0"，这类值浏览器不报错但语义断裂 - 超出行数限制（如
rowspan="99"但只剩2行）时，浏览器按剩余行数渲染，但table.rows[i].cells.length等 DOM 属性可能返回意外结果
和colspan混用时，列总数必须对得上
一个<td rowspan="2" colspan="3">会同时占 2 行 × 3 列 = 6 个原始格子。这意味着：它所在行要少写 2 个<code><td>（因为右侧两列被吞），接下来一行也要少写 2 个<code><td>（因为同一列位置被跨占）。
<p>最容易翻车的是：某行<code><tr>中<code><td>个数与其他行不一致，又没意识到<code>rowspan/colspan已改变实际列宽。结果就是表头偏移、CSS :nth-child() 失效、响应式断点错乱。
- 验证技巧：
Array.from(tr.children).reduce((sum, td) => sum + (td.colSpan || 1), 0)计算每行“等效列数”，确保全部相等 - 复杂合并建议先手绘 3×3 或 4×4 网格，标出每个单元格的
rowspan/colspan值再写代码
<td>，取决于前面所有<code>rowspan的累计占用——这里漏一次跳过，后面整张表就偏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
