rowspan必须写在起始单元格中，值为正整数且不超过剩余行数，被跨行位置须彻底省略标签而非留空或写空标签。
直接说结论：rowspan 必须写在要跨行的起始 <td> 或 <code><th> 里，值为正整数，被跨过的行对应列必须彻底删掉整个 <code><td> 标签——不是留空，不是写 <code><td></td>，是压根不出现。
rowspan 写在哪一行才生效
rowspan 只对它所在的那个单元格起作用，并向下“锁定”该列位置。比如你想让“张老师”从第 2 行开始跨 3 行，就得把 rowspan="3" 写在第 2 行的 <td> 上，而不是第 1 行或第 4 行。
<ul><li>常见错误：把 <code>rowspan="2" 写在第二行末尾的 <td> 里，结果只渲染出 1 行高度——因为第一行该列已占满，第二行再声明已无“向下空间”
<li>正确逻辑：跨行起点 = 第一个要显示内容的行，且该行必须还在表格有效范围内</li>
<li>验证方法：用浏览器开发者工具点开 <code><tr>，看实际渲染出的 <code><td> 数量是否与预期一致
<h3>被跨行的列为什么不能留空 td</h3>
<p>浏览器靠 <code>rowspan 数值自动跳过后续行中对应列的位置。一旦你在被跨过的行里写了 <td></td> 或 <td> </td>，哪怕内容为空，也会被当成一个真实单元格参与布局，导致列偏移、DOM 结构错乱，tr.cells.length 读取结果失真。
- ✅ 正确：第 2、3 行完全不写第一列的
<td> <li>❌ 错误：<code><td></td>、<td> </td>、<td class="empty"></td>—— 全部会撑开列宽 - 动态生成时尤其危险：JS 拼接或 Vue/React 的
v-if判断若没覆盖所有分支，容易漏掉“省略”逻辑 - 例如表格共 5 行，第 4 行写
rowspan="3"→ 实际只剩 2 行可跨，行为未定义 -
rowspan="0"有特殊含义（跨到<thead>/<code><tbody> 末尾），但仅 Firefox 和旧版 Opera 支持，Chrome/Safari 不识别，生产环境慎用 <li>服务端或 JS 动态生成时，必须提前统计分组行数，再决定哪一行设 <code>rowspan、值为多少、其余行跳过该列 - 每行所有
<td> 的 <code>colspan值加起来，必须等于表格设计的总列数（按展开后计算） - 表头用
colspan、正文第一行又用大rowspan，极易导致列基准偏移，建议先手绘网格草图标出每个单元格的rowspan/colspan值 - 调试时别只数源码里的
<td> 个数，重点看开发者工具里每个 <code><tr> 下渲染出的实际单元格分布 <p>最常被忽略的其实是“省略”这个动作——不是“不填内容”，而是“不生成标签”。动态渲染时，逻辑上要跳过某列，代码里就得真的不 push 那个 <code><td> 字符串或不 return 对应 JSX 元素。这点一错，整个表格结构就塌了。</td>
rowspan 值不能超过剩余行数
rowspan 的数值不是任意写的，它必须 ≤ 从当前行到表格末尾（含当前行）的总行数。超出后浏览器不会报错，但语义失效：DOM 中该单元格仍只占 1 行，且可能引发后续行列索引错位。
和 colspan 混用时列数怎么守恒
一个 <td rowspan="2" colspan="3"> 占据的是 2 行 × 3 列 = 6 个原始格子。这意味着：当前行剩下可用列数 = 总列数 − 3；下一行该区域 3 列位置必须全部跳过，且该行其余 <code><td> 的 <code>colspan 总和得补足剩余列数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
