rowspan必须写在起始单元格且只能向下跨行，被跨行对应列的td必须完全省略，值须为≥1正整数且不超过剩余行数，与colspan混用时需同步跳过行列。
rowspan 必须写在起始单元格上，不是哪一行都行
rowspan 只对它所在的那个 <td> 或 <code><th> 生效，且只能向下跨行占位。比如你想让“张三”在第 2、3、4 行都显示，就得把 <code>rowspan="3" 写在第 2 行的 <td rowspan="3">张三</td> 里，而不是第 1 行或第 4 行。
常见错误现象：
- 写了
rowspan="3"却只看到 1 行高度 → 很可能写在了最后一行，没剩余行可跨 - 表格右侧内容整体右移 → 当前行其他
<td> 数量没同步减少，导致列数错配<h3>被跨过的行必须彻底省略对应列的 <code><td> 标签 <p>不是留空，不是写 <code><td></td>，是直接删掉那一列的整个<td> 元素。浏览器靠 <code>rowspan的数值自动跳过指定行数，一旦多写一个<td>，就会挤占空间、导致列偏移甚至 DOM 结构错乱。<p>✅ 正确写法：</p> <pre class="brush:php;toolbar:false;"><tr> <td rowspan="3">张老师</td> <td>数学</td> </tr><tr> <td>物理</td> <!-- 第一列省略 --> </tr><tr> <td>化学</td> <!-- 第一列省略 --> </tr></pre> <p>❌ 错误写法：</p> <pre class="brush:php;toolbar:false;"><tr> <td rowspan="3">张老师</td> <td>数学</td> </tr><tr> <td></td> <!-- 空 td 会占位，破坏结构 --> <td>物理</td> </tr></pre> <h3>rowspan 值必须是正整数，不能填 0 或超出行数 </h3> <p><code>rowspan="0"是无效的，浏览器会忽略或退化为rowspan="1"。值必须是 ≥1 的整数，且不能超过从当前行到表格末尾的剩余行数（含当前行）。比如表格只剩 2 行，却写
rowspan="5"，浏览器会按最多 2 行渲染，但语义已损坏——table.rows[i].cells.length可能拿不到预期值，JS 读取时索引偏移。动态生成时要注意：
- 服务端或 JS 拼接前，得先统计相同值连续出现的行数
- 只在重复块的第一行设
rowspan，后面同组行对应列直接 omit（不生成<td>）<li>中间隔了一行不同值，就得重置计数，不能只看“值相等”</li> <h3>和 colspan 混用时，行列基准极易偏移 </h3> <p><code>rowspan和colspan可以一起用，例如<td rowspan="2" colspan="2">，但它会同时占据 2 行 × 2 列共 4 个单元格的位置。后续两行中，对应这 2 列的位置都必须跳过。<p>最容易翻车的地方是：某处少写了一个 <code><td>，导致整行列基准偏移，再叠加 <code>colspan就彻底歪了。用开发者工具检查table的 Layout 面板，看是否有 “Collapsed cells” 警告；或者打印Array.from(tr.cells).map(td => td.cellIndex)，确认每行索引是否连续。真正难的不是手写静态 HTML，而是当表格从 JSON 渲染时，要提前算好每行该渲染几个单元格——漏掉一次跳过，整张表就偏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
