rowspan是让单元格纵向占据多行而非合并，其值不能超过从当前行起的剩余行数，被覆盖行列必须留空（不可写<td></td>），跨<thead>/<tbody>仍按实际行序计算，混用colspan时需注意布局冲突。
rowspan 是让单元格纵向占据多行，不是“合并”后续单元格
很多人以为 rowspan 是把几行“合并成一个”，其实它只是让当前 <td> 或 <th> 占据指定行数的高度，浏览器会自动跳过它所覆盖的后续行中同一列的位置。如果在这些位置还写了 <td>，表格结构就会错位甚至渲染异常。
常见错误现象：
- 表格某列突然多出空行或内容错列
- 明明设了
rowspan="3"，但只看到两行生效 - 动态插入行后，原
rowspan单元格被“撑开”或重叠
关键点：
-
rowspan值必须 ≤ 从当前行开始往下的剩余行数（比如总共 4 行，第 3 行设rowspan="3"就越界） - 被覆盖的那些行，对应列位置**必须不写任何
<td>或<th>**，不能留空标签，也不能用<td></td> - 如果表格有
<thead>/<tbody>分组，rowspan跨组时仍按实际行序计算，不以分组为界
rowspan 和 colspan 混用时，先处理 rowspan 所在行的列布局
当一个单元格同时设 rowspan="2" colspan="3"，它的逻辑是：先按 colspan 把本行占满 3 列，再让这个“大块”向下延伸 1 行。此时第二行的前 3 列位置都不可再出现单元格。
容易踩的坑：
- 第二行仍写了 3 个
<td>→ 浏览器强行补列，导致列数膨胀、边框错乱 - 第一行其他列没对齐总列数（比如本该 5 列，
colspan="3"后只跟了 1 个<td>）→ 渲染时自动补空单元格，破坏预期结构 - 用 CSS
display: grid或 JS 动态生成表格时，直接套用 rowspan 值但没删掉被覆盖单元格 → DOM 结构冲突
实操建议：
- 画草图标出行/列索引，标出每个
rowspan覆盖的行列范围 - 写完 HTML 后用浏览器开发者工具检查
<tr>内部<td>数量是否逐行递减（被 rowspan 覆盖的行应更少） - 避免在响应式表格中过度依赖 rowspan，尤其配合
table-layout: fixed时，列宽可能意外压缩
动态修改 rowspan 时必须手动删除被覆盖单元格
静态 HTML 中写对了 rowspan，表格就稳；但 JS 动态操作时，仅改属性值不够。比如把某个 <td rowspan="2"> 改成 rowspan="3"，浏览器不会自动删掉第三行对应列的 <td> —— 它还在那儿，于是结构崩了。
正确做法：
- 先定位到被新
rowspan覆盖的所有后续行中的目标列单元格 - 用
.remove()显式删掉它们，不能只设style.display = 'none' - 若涉及 Vue/React 等框架，别直接操作 DOM；应在数据层更新后，靠模板重渲染保证结构一致
- 批量修改时，建议先收集所有受影响的
<tr>，再统一清理，避免反复 reflow
性能提示：频繁增删 <td> 会触发 layout thrashing，如需高频更新，考虑用 DocumentFragment 批量操作。
rowspan 值超出剩余行数时浏览器静默截断
设 rowspan="10" 但表格只剩 2 行？浏览器不会报错，也不会警告，而是自动按“最多能占的行数”来渲染（即 2）。这种静默行为容易掩盖逻辑错误。
排查建议：
- 服务端生成表格时，在循环写
<tr>前先算好总行数，校验每个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实现“自动拉伸高度”，它不响应内容变化；真要撑高，用 CSSmin-height或 flex 布局更可控
最常被忽略的一点：rowspan 的行为完全由 HTML 解析器决定，和 CSS 无关；哪怕加了 border-collapse: collapse 或 vertical-align，也不改变它跳过单元格的机制。
