排查 rowspan 错位需先检查 dom 结构，确认每行 td 数量是否正确，避免多写或漏删；rowspan 值不可超出剩余行数，动态生成须先统计再回填；主流表格库不支持 tbody 中 rowspan，应改用表头分组或 css 模拟；旧版浏览器补全策略不同，须显式占位。
rowspan 渲染错位时先看浏览器开发者工具里的实际 DOM 结构
别猜，直接右键表格 → 检查，在 Elements 面板里逐行展开 <tr>，观察每行的 <code><td> 数量是否符合预期。重点看两点：<br>— 当前行是否多写了一个本该被 <code>rowspan 跳过的 <td>；<br>— 后续行是否漏删了对应列的 <code><td>，导致浏览器自动补空但不参与跨行计算。
<h3>rowspan 值超出剩余行数会导致语义失效但不报错
</h3>
<p><code>rowspan="5" 写在倒数第二行？浏览器会把它截断为 rowspan="2"（含当前行），但 DOM 中 table.rows[i].cells.length 会返回异常值，JS 操作时容易读到 undefined。
必须确保：
— N ≤ 表格总行数 − 当前行索引（索引从 0 开始）
— 动态生成时，得先遍历后续行统计重复值跨度，再回填首行 rowspan，不能靠“目测”硬编码
DataTables 等 JS 表格库对 rowspan 的兼容性限制
绝大多数前端表格库（如 DataTables、AG Grid、Ant Design Table）只允许 rowspan 出现在 <thead> 或 <code><tfoot>，<code><tbody> 中出现会直接破坏列映射逻辑。<br>典型表现：<br>— 分页后数据列与表头错位<br>— 排序点击无响应或排序错乱<br>— <code>columns 配置失效，列宽/隐藏异常
解决方案：
— 把需要跨行的逻辑上移到 <thead>（比如分组标题）<br>— <code><tbody> 改用纯扁平结构，视觉合并靠 CSS <code>border-collapse + background 模拟
— 真需跨行数据，改用树形结构或分组折叠 UI 替代
IE / Safari 旧版本中 rowspan 错位的隐式补全差异
当某行 <td> 数量不足时，WebKit（Safari）和 Trident（IE）对“缺列”的补全策略不同：IE 可能忽略空缺，WebKit 却强行插入不可见单元格并计入网格计数，导致同一份 HTML 在不同浏览器中跨行高度不一致。<br>稳妥做法：<br>— 每行显式写满应有列数，缺失位置用带 <code>class="sr-only" 的空 <td> 占位<br>— CSS 中设 <code>td.sr-only { width: 0; padding: 0; border: none; }
— 绝对避免依赖浏览器自动补全，尤其在需要打印或导出 PDF 的场景
复杂点在于：rowspan 不是样式属性，它改写的是表格的底层网格声明。一旦某处漏删、多写或值算错，整张表的行列索引就偏了——而这种错误不会触发控制台报错，只能靠 DOM 结构比对和跨浏览器实测才能暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
