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