rowspan本质是声明跨行占用，需写在起始单元格且值为正整数≤剩余行数，被跨行对应列必须彻底删除td标签，否则导致错位；动态生成时易因漏删或统计错误引发结构崩溃。
rowspan 不是让单元格“变高”，而是告诉浏览器：从这一行开始，下面 N−1 行的同一列位置，别再渲染任何 <td> 了。写错位置、漏删后续 <code><td>、跨行数超限，这三件事占了 90% 的错位问题。
<h3>rowspan 必须写在起始行的 <code><td> 或 <code><th> 上
<p>它只对当前标签生效，且只能向下跨行。比如你想让“张老师”从第 2 行开始占 3 行，就得把 <code>rowspan="3" 写在第 2 行那个 <td> 里，而不是第 1 行或第 4 行。
<ul>
<li>写在最后一行的 <code>rowspan="2" → 没效果，因为没剩余行可跨
rowspan="1" 是默认值，可省略；rowspan="0" 无效，部分浏览器当 1 处理，别用被跨过的行，对应列必须彻底删除 <td> 标签
<p>不是留空，不是写 <code><td></td>，是整行里那一列的 <td> 标签必须不存在。多写一个，就会撑开列宽、错位、<code>table.rows[i].cells.length 读错。
- ✅ 正确：
<tr>
<td rowspan="3">张老师</td>
<td>数学</td>
</tr><tr><td>物理</td></tr><tr><td>化学</td></tr>
- ❌ 错误：
<tr>
<td></td>
<td>物理</td>
</tr> —— 空 <td> 会占位
<li>Vue/React 中别用 <code>v-if 或 {condition && <td>} 控制显隐，显隐 ≠ 删除；得提前聚合数据，跳过该列渲染
<h3>和 <code>colspan 混用时，先画草图再写代码
<tr> <td rowspan="3">张老师</td> <td>数学</td> </tr><tr><td>物理</td></tr><tr><td>化学</td></tr>
<tr>
<td></td>
<td>物理</td>
</tr> —— 空 <td> 会占位
<li>Vue/React 中别用 <code>v-if 或 {condition && <td>} 控制显隐，显隐 ≠ 删除；得提前聚合数据，跳过该列渲染
<h3>和 <code>colspan 混用时，先画草图再写代码一个 <td rowspan="2" colspan="3"> 占据的是 2 行 × 3 列共 6 个原始格子。这意味着：当前行剩下可用列数 = 总列数 − 3；下一行该区域所有列都必须跳过。
<ul>
<li>每行实际参与布局的单元格数，由 <code>colspan 展开后总和决定，必须守恒
<thead> 和 <code><tbody> 时，列坐标系共享 —— <code><thead> 里用了 <code>rowspan="2"，<tbody> 第一行对应列也得空着
<li>调试时用开发者工具看 <code>document.querySelector('tbody tr:first-child').cells.length，比肉眼数靠谱最麻烦的不是写 rowspan，而是动态生成时漏掉重复值统计、跨行数未同步更新、或者以为“隐藏就行”却没真正删掉 DOM 节点。这些地方一错，表格结构就 silently 崩了，JS 读取 cells 会索引偏移，样式也会错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
