rowspan本质是删除指令而非样式指令，需写在起始行且值≤剩余行数，被跨行对应列必须彻底删除td标签，跨thead/tbody时列坐标需对齐，复杂场景须先画草图标定覆盖区域。

直接说结论：rowspan 不是“让单元格变高”，而是“告诉浏览器：从这一行开始，下面 n−1 行的同一列位置，你别再渲染任何 <td> 了”。写错位置、漏删后续 <code><td>、跨行数超限，这三件事占了 90% 的错位问题。 <h3>rowspan 必须写在起始行，且值不能超过剩余行数</h3> <p>很多人把 <code>rowspan="3" 写在最后一行，结果什么都没发生——因为没地方可跨。浏览器只认“当前行往下还能排几行”，不看表格总行数。

• rowspan 值必须 ≤ 从当前行到 或 结束之间的行数（含当前行）
• 比如 <tbody> 里共 5 行，你在第 4 行写 <code>rowspan="2" → 错误，只剩 2 行（第 4、5 行），但 rowspan="2" 需要占用第 4 和第 5 行，刚好够；写在第 5 行则只能用 rowspan="1"
• 动态生成时，得先遍历数据算出连续重复值的跨度，再决定在哪一行写 rowspan，而不是每行都判断

被跨过的行，对应列必须彻底删除 <td>，不是留空 <p>这是最常踩的坑：<code><td rowspan="2"></td> 后面跟一行 <td></td> <td>内容</td>，看起来“空着”，其实那个空 <td> 会占位，导致整列右移。 <ul><li>正确做法：第二行同一列位置，整个 <code><td> 标签都不出现 <li>错误写法示例：<code><tr> <td rowspan="2">A</td> <td>B</td> </tr> <tr> <td></td> <td>C</td> </tr> → 第二行第一个 <td> 必须删掉 <li>Vue/React 中别在模板里用 <code>v-if 或 {condition && <td>} 控制显隐——显隐 ≠ 删除；得提前聚合数据，跳过该列的渲染逻辑 <h3>跨 <code><thead> 和 <code><tbody> 时，列坐标必须对齐 <p><code><thead> 和 <code><tbody> 是独立容器，但它们共享同一套列坐标系。你在 <code><thead> 里用 <code>rowspan="2"，<tbody> 第一行对应列也得空着。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill5493" title="html-to-pptx"><img src="https://img.php.cn/upload/skill/000/000/081/179051045119472.jpg" alt="html-to-pptx" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill5493" title="html-to-pptx">html-to-pptx</a> <p>将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。</p> </div> <a href="/xiazai/skill5493" title="html-to-pptx" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul><li>典型翻车现场：<code><thead> <tr> <th rowspan="2">ID</th> <th>Name</th> </tr> <tr><th>Age</th></tr> </thead> <tbody><tr> <td>1</td> <td>Alice</td> <td>25</td> </tr></tbody> → 错！<tbody> 第一行第一列不该有 <code><td> <li>验证方法：用 <code>document.querySelector('tbody tr:first-child').cells.length 看是否等于表头实际列数（注意 colSpan 也会贡献列数）

如果 <thead> 最后一行用了 <code>rowspan，<tbody> 开头几行对应列都要同步跳过，哪怕只是空数据 <h3>同时用 <code>rowspan 和 colspan 时，先画草图再编码

二维合并会让行列总数变成隐式约束条件，靠脑子推很容易漏掉某一行少写一个 <td>，或某列多塞一个。 <ul> <li>动手前，在纸上标出每个单元格的起始 <code>(row, col) 和 rowspan/colspan 值，算出它覆盖的矩形区域

• 每行真实列数 = 所有 <td> 的 <code>colSpan 之和（没写默认为 1）；所有 <tr> 这个和必须相等 <li>调试时打开开发者工具，选中合并单元格，看 box model 是否跨行渲染；再手动检查下一行同列 DOM 节点是否存在</li> <p>复杂点不在属性本身，而在它强制你把“视觉合并”翻译成“DOM 删除动作”。只要记住：rowspan 是删除指令，不是样式指令，就避开了大多数坑。</p> </tr>