rowspan必须写在起始行的上且后续对应列的要彻底省略，否则表格错位；值须为正整数、≤剩余行数，动态生成时需预先计算并跳过被跨行的单元格。
rowspan 属性不能“自动合并”，必须手动跳过被跨行的 <td>，否则表格立刻错位——这是 90% 的人写错的根本原因。<h3>rowspan 必须写在起始行的 <code><td> 上<p>它只对当前单元格生效，向下占位，不作用于其他行。比如你想让第 2 行第 1 列跨 3 行，<code>rowspan="3" 就得写在第 2 行那个 <td> 里，而不是第 1 行或第 4 行。<p>常见错误现象：</p>
<ul>
<li>写了 <code>rowspan="3" 却只显示一行高度 → 很可能写在了最后一行，没剩余行可跨
<td> 数量没减少，列数对不上<p>关键点：<code>rowspan 值必须 ≤ 从当前行到表格末尾的剩余行数（含当前行）。浏览器不会帮你校验超限，只会按剩余行数渲染，但语义已损坏。
被跨行的对应列必须彻底省略 <td><p>不是留空，不是写 <code><td></td>，是直接删掉那一列的整个 <td> 元素。<p>原因：浏览器靠 <code>rowspan 数值自动跳过指定行数；一旦多写一个 <td>，就会挤占空间、导致列偏移，甚至让 <code>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>）<li>用 JS 动态操作时，修改 <code>rowspan属性后，DOM 会重排，但不会自动删除已被跨过的<td>，必须手动移除<li>Vue/React 中若用 <code>v-for或map渲染，需提前聚合数据，而不是在模板里v-if判定——否则容易漏掉隐藏的<td> <h3>rowspan="0" 是无效的，且浏览器行为不一致</h3> <p><code>rowspan值必须为正整数，设为0会被忽略，退化为1。HTML 规范明确禁止0值，浏览器也不会帮你推算“跨到最后一行”。实际做法：
- 先数清楚目标跨行数（比如从第 2 行到第 4 行共 3 行），就写
rowspan="3" - 如果后续增删行，这个值必须手动同步更新
- 动态生成建议在 JS 中预先计算好跨行数再写入，避免硬编码
- 不推荐填个大数（如
rowspan="999"）凑合，IE 对超出行数的值表现异常
真正难的不是写对
rowspan，而是当表格从 JSON 渲染时，漏掉一次跳过，整张表的列索引就全偏了——这种问题在调试时往往要回溯三遍 DOM 才能定位到哪一行少删了一个<td>。</td> - 先数清楚目标跨行数（比如从第 2 行到第 4 行共 3 行），就写
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
