rowspan是让单元格纵向占据多行而非合并，其值不能超过从当前行起的剩余行数，被覆盖行列必须留空（不可写），跨/仍按实际行序计算，混用colspan时需注意布局冲突。

rowspan 是让单元格纵向占据多行，不是“合并”后续单元格

很多人以为 rowspan 是把几行“合并成一个”，其实它只是让当前 <td> 或 <code><th> 占据指定行数的高度，浏览器会自动跳过它所覆盖的后续行中同一列的位置。如果在这些位置还写了 <code><td>，表格结构就会错位甚至渲染异常。<p>常见错误现象：</p> <ul> <li>表格某列突然多出空行或内容错列</li> <li>明明设了 <code>rowspan="3"，但只看到两行生效

动态插入行后，原 rowspan 单元格被“撑开”或重叠

关键点：

• rowspan 值必须 ≤ 从当前行开始往下的剩余行数（比如总共 4 行，第 3 行设 rowspan="3" 就越界）
• 被覆盖的那些行，对应列位置**必须不写任何 <td> 或 <code><th>**，不能留空标签，也不能用 <code><td></td>
• 如果表格有 <thead>/<code><tbody> 分组，<code>rowspan 跨组时仍按实际行序计算，不以分组为界

  rowspan 和 colspan 混用时，先处理 rowspan 所在行的列布局

  当一个单元格同时设 rowspan="2" colspan="3"，它的逻辑是：先按 colspan 把本行占满 3 列，再让这个“大块”向下延伸 1 行。此时第二行的前 3 列位置都不可再出现单元格。

  容易踩的坑：

  • 第二行仍写了 3 个 <td> → 浏览器强行补列，导致列数膨胀、边框错乱<li>第一行其他列没对齐总列数（比如本该 5 列，<code>colspan="3" 后只跟了 1 个 <td>）→ 渲染时自动补空单元格，破坏预期结构<li>用 CSS <code>display: grid 或 JS 动态生成表格时，直接套用 rowspan 值但没删掉被覆盖单元格 → DOM 结构冲突

  实操建议：

  
  Wechat HTML Publisher
  直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。
  下载
  • 画草图标出行/列索引，标出每个 rowspan 覆盖的行列范围
  • 写完 HTML 后用浏览器开发者工具检查 <tr> 内部 <code><td> 数量是否逐行递减（被 rowspan 覆盖的行应更少）<li>避免在响应式表格中过度依赖 rowspan，尤其配合 <code>table-layout: fixed 时，列宽可能意外压缩

  动态修改 rowspan 时必须手动删除被覆盖单元格

  静态 HTML 中写对了 rowspan，表格就稳；但 JS 动态操作时，仅改属性值不够。比如把某个 <td rowspan="2"> 改成 <code>rowspan="3"，浏览器不会自动删掉第三行对应列的 <td> —— 它还在那儿，于是结构崩了。<p>正确做法：</p> <ul> <li>先定位到被新 <code>rowspan 覆盖的所有后续行中的目标列单元格

  • 用 .remove() 显式删掉它们，不能只设 style.display = 'none'
  • 若涉及 Vue/React 等框架，别直接操作 DOM；应在数据层更新后，靠模板重渲染保证结构一致
  • 批量修改时，建议先收集所有受影响的 <tr>，再统一清理，避免反复 reflow<p>性能提示：频繁增删 <code><td> 会触发 layout thrashing，如需高频更新，考虑用 <code>DocumentFragment 批量操作。

    rowspan 值超出剩余行数时浏览器静默截断

    设 rowspan="10" 但表格只剩 2 行？浏览器不会报错，也不会警告，而是自动按“最多能占的行数”来渲染（即 2）。这种静默行为容易掩盖逻辑错误。

    排查建议：

    • 服务端生成表格时，在循环写 <tr> 前先算好总行数，校验每个 <code>rowspan 是否 ≤ 剩余行数
    • 前端调试可用这段代码快速检测：

      Array.from(document.querySelectorAll('td[rowspan], th[rowspan]')).forEach(el => { const rs = +el.getAttribute('rowspan'); const row = el.closest('tr'); const idx = Array.from(row.parentNode.children).indexOf(row); const totalRows = row.parentNode.children.length; if (rs > totalRows - idx) console.warn('rowspan overflow:', el, rs, 'vs', totalRows - idx); });

    • 不要依赖 rowspan 实现“自动拉伸高度”，它不响应内容变化；真要撑高，用 CSS min-height 或 flex 布局更可控

    最常被忽略的一点：rowspan 的行为完全由 HTML 解析器决定，和 CSS 无关；哪怕加了 border-collapse: collapse 或 vertical-align，也不改变它跳过单元格的机制。