rowspan必须写在合并区域的首行单元格中，向下占用对应列位置，后续行该列需完全省略，否则会导致表格结构错乱。

rowspan必须写在起始行的或 上

合并三行，不是随便哪一行加rowspan="3"都行——它只对当前单元格生效，并向下“锁定”对应列位置。比如你要让“张老师”覆盖第1、2、3行的第一列，就得把rowspan="3"写在第1行的<td rowspan="3">张老师</td>里，而不是第2行或第3行。

• 写在最后一行？浏览器没后续行可跨，rowspan直接被忽略，看起来毫无效果
• 值超过剩余行数（比如只剩2行却写rowspan="4"），会导致DOM结构异常，tr.children.length可能不一致
• rowspan本质是“占位”，不是“拉高”，它不改变当前单元格渲染高度，只是告诉浏览器：“下面n−1行，这个列位置你别再画了”

  被跨过的行必须彻底删掉对应，不能留空

  这是最常踩的坑：有人以为第二行第一列“没内容”，就写个<td></td>占位，结果整张表向右偏移一列。浏览器会把它当真实单元格渲染，导致列数膨胀。

  • ✅ 正确：第1行有<td rowspan="3">张老师</td>，第2、3行同一列**完全不写或 **
  • ❌ 错误：<td></td>、<td> 、甚至<code><td style="display:none">——只要DOM里存在该元素，就算占位 <li>验证方法：用<code>document.querySelectorAll('tr')[1].children.length对比第0行，若不等，说明结构已错

  动态生成时得先统计连续重复行数

  服务端模板或JS拼接表格时，不能靠“看到相同值就加rowspan”，必须确认是否相邻且连续。中间断开，就得重置计数。

  
  Wechat HTML Publisher
  直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。
  下载
  • 只在重复块的**第一行**设置rowspan，后续同组行对应列直接omit（不生成任何）
  • Vue/React中别在v-for或map里用v-if控制显示——容易漏掉本该删除的，建议提前聚合数据，生成带rowspan字段的结构化数组
  • Node.js模板引擎（如EJS）中，需用变量缓存上一行值+计数器，判断是否为新组起点

  colspan和rowspan混用时，行列都要对齐

  一个单元格同时设rowspan="2" colspan="3"，等于吃掉2×3=6个原始格子。周围所有行、列都得按这个“吞掉量”做减法。

  立即学习“前端免费学习笔记（深入）”；

  • 该单元格所在行，其余单元格的colspan总和 + 3 必须等于总列数（如共5列，则其他colspan之和只能是2）
  • 下一行中，它覆盖的3列位置全部留空——不能写<td></td>，也不能用colspan="0"（HTML5中无效）
  • 和 分开写时，务必确保展开后的逻辑列数一致，否则border-collapse: collapse下边框会断开 浏览器不报错，但结构错一位，整张表就错位。关键不是“怎么写”，而是“哪里不该写”。