rowspan必须写在起始单元格中，值为正整数且不超过剩余行数，被跨行位置须彻底省略标签而非留空或写空标签。

直接说结论：rowspan 必须写在要跨行的起始 或 里，值为正整数，被跨过的行对应列必须彻底删掉整个 标签——不是留空，不是写 ，是压根不出现。

rowspan 写在哪一行才生效

rowspan 只对它所在的那个单元格起作用，并向下“锁定”该列位置。比如你想让“张老师”从第 2 行开始跨 3 行，就得把 rowspan="3" 写在第 2 行的 上，而不是第 1 行或第 4 行。

• 常见错误：把 rowspan="2" 写在第二行末尾的 里，结果只渲染出 1 行高度——因为第一行该列已占满，第二行再声明已无“向下空间”
• 正确逻辑：跨行起点 = 第一个要显示内容的行，且该行必须还在表格有效范围内
• 验证方法：用浏览器开发者工具点开 ，看实际渲染出的 数量是否与预期一致

  被跨行的列为什么不能留空 td

  浏览器靠 rowspan 数值自动跳过后续行中对应列的位置。一旦你在被跨过的行里写了 或 ，哪怕内容为空，也会被当成一个真实单元格参与布局，导致列偏移、DOM 结构错乱，tr.cells.length 读取结果失真。

  • ✅ 正确：第 2、3 行完全不写第一列的
  • ❌ 错误：、 、 —— 全部会撑开列宽
  • 动态生成时尤其危险：JS 拼接或 Vue/React 的 v-if 判断若没覆盖所有分支，容易漏掉“省略”逻辑

  rowspan 值不能超过剩余行数

  rowspan 的数值不是任意写的，它必须 ≤ 从当前行到表格末尾（含当前行）的总行数。超出后浏览器不会报错，但语义失效：DOM 中该单元格仍只占 1 行，且可能引发后续行列索引错位。

  
  使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审
  使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。
  下载
  • 例如表格共 5 行，第 4 行写 rowspan="3" → 实际只剩 2 行可跨，行为未定义
  • rowspan="0" 有特殊含义（跨到 / 末尾），但仅 Firefox 和旧版 Opera 支持，Chrome/Safari 不识别，生产环境慎用
  • 服务端或 JS 动态生成时，必须提前统计分组行数，再决定哪一行设 rowspan、值为多少、其余行跳过该列

  和 colspan 混用时列数怎么守恒

  一个 占据的是 2 行 × 3 列 = 6 个原始格子。这意味着：当前行剩下可用列数 = 总列数 − 3；下一行该区域 3 列位置必须全部跳过，且该行其余 的 colspan 总和得补足剩余列数。

  • 每行所有 的 colspan 值加起来，必须等于表格设计的总列数（按展开后计算）
  • 表头用 colspan、正文第一行又用大 rowspan，极易导致列基准偏移，建议先手绘网格草图标出每个单元格的 rowspan/colspan 值
  • 调试时别只数源码里的 个数，重点看开发者工具里每个 下渲染出的实际单元格分布

    最常被忽略的其实是“省略”这个动作——不是“不填内容”，而是“不生成标签”。动态渲染时，逻辑上要跳过某列，代码里就得真的不 push 那个 字符串或不 return 对应 JSX 元素。这点一错，整个表格结构就塌了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！