rowspan必须写在起始行的<td>上且后续对应列的<td>要彻底省略，否则表格错位；值须为正整数、≤剩余行数，动态生成时需预先计算并跳过被跨行的单元格。
rowspan 属性不能“自动合并”，必须手动跳过被跨行的 <td>，否则表格立刻错位——这是 90% 的人写错的根本原因。
rowspan 必须写在起始行的 <td> 上
它只对当前单元格生效，向下占位，不作用于其他行。比如你想让第 2 行第 1 列跨 3 行，rowspan="3" 就得写在第 2 行那个 <td> 里，而不是第 1 行或第 4 行。
常见错误现象：
- 写了
rowspan="3"却只显示一行高度 → 很可能写在了最后一行，没剩余行可跨 - 表格右侧内容整体右移 → 当前行其他
<td>数量没减少，列数对不上
关键点：rowspan 值必须 ≤ 从当前行到表格末尾的剩余行数（含当前行）。浏览器不会帮你校验超限，只会按剩余行数渲染，但语义已损坏。
立即学习“前端免费学习笔记（深入）”；
被跨行的对应列必须彻底省略 <td>
不是留空，不是写 <td></td>，是直接删掉那一列的整个 <td> 元素。
原因：浏览器靠 rowspan 数值自动跳过指定行数；一旦多写一个 <td>，就会挤占空间、导致列偏移，甚至让 tr.cells.length 拿不到预期值。
✅ 正确示例：
<tr> <td rowspan="3">张老师</td> <td>数学</td> </tr> <tr> <td>物理</td> <!-- 第一列省略 --> </tr> <tr> <td>化学</td> <!-- 第一列省略 --> </tr>
❌ 错误示例：
<tr> <td rowspan="3">张老师</td> <td>数学</td> </tr> <tr> <td></td> <!-- 空 td 会占位，破坏结构 --> <td>物理</td> </tr>
动态生成时，rowspan 值必须提前计算，不能靠模板 if-else
服务端渲染或 JS 拼接时，rowspan 不是静态写死就能一劳永逸的——得先统计相同值连续出现的行数，再决定在哪一行写 rowspan，其余行跳过该列。
注意点：
- 不能只看“值相等”，还要确认是否「相邻行」；中间隔了一行不同值，就得重置计数
- 通常只在重复块的第一行设置
rowspan，后面同组行对应列直接 omit（不生成<td>） - 用 JS 动态操作时，修改
rowspan属性后，DOM 会重排，但不会自动删除已被跨过的<td>，必须手动移除 - Vue/React 中若用
v-for或map渲染，需提前聚合数据，而不是在模板里v-if判定——否则容易漏掉隐藏的<td>
rowspan="0" 是无效的，且浏览器行为不一致
rowspan 值必须为正整数，设为 0 会被忽略，退化为 1。HTML 规范明确禁止 0 值，浏览器也不会帮你推算“跨到最后一行”。
实际做法：
- 先数清楚目标跨行数（比如从第 2 行到第 4 行共 3 行），就写
rowspan="3" - 如果后续增删行，这个值必须手动同步更新
- 动态生成建议在 JS 中预先计算好跨行数再写入，避免硬编码
- 不推荐填个大数（如
rowspan="999"）凑合，IE 对超出行数的值表现异常
真正难的不是写对 rowspan，而是当表格从 JSON 渲染时，漏掉一次跳过，整张表的列索引就全偏了——这种问题在调试时往往要回溯三遍 DOM 才能定位到哪一行少删了一个 <td>。
