rowspan值必须为正整数，非法值被忽略；跨行需手动计算并同步更新，被跨行对应列的必须完全省略，否则导致错位；混用colspan时须保证每行总列数一致；复杂合并影响可访问性，建议用headers属性或CSS替代。
rowspan 值必须是正整数，不能设为 0 或负数
很多人试 rowspan="0" 想让单元格“自动撑到最后一行”，结果发现完全没反应——浏览器直接忽略它，退化成 rowspan="1"。HTML 规范明确要求该值必须是大于 0 的整数，没有“自动推算”机制。
实际做法是：先数清楚目标跨行数（比如从第 2 行到第 4 行共 3 行），就写 rowspan="3"；如果后续增删行，这个值必须手动同步更新。动态生成时建议在 JS 中预先计算好再写入，而不是硬编码。
-
rowspan="2px"、rowspan="-1"等非法值会被浏览器静默忽略 - 超出行数限制（如只剩 1 行却设
rowspan="5"）时，Chrome/Firefox 会按剩余行数渲染，但语义已损坏，table.rows[i].cells.length可能异常 -
rowspan不跨<thead>/</thead> <tbody> 边界生效，别指望表头的 <code>rowspan能拉到表体里被跨过的行必须彻底省略对应列的
标签 这是错位最常见原因：
rowspan不是“覆盖”，而是“占位+跳过”。设置了rowspan="3"后，后续两行同一列位置**不能出现任何<td> 或 <code><th>**，包括空标签或 <code><td></td>。✅ 正确结构：
立即学习“前端免费学习笔记（深入）”；
<tr> <td rowspan="3">张老师</td> <td>数学</td> </tr> <tr> <td>物理</td> <!-- 第一列完全省略 --> </tr> <tr> <td>化学</td> <!-- 第一列完全省略 --> </tr>
❌ 错误写法（会导致列偏移、DOM 结构错乱）：
<tr> <td rowspan="3">张老师</td> <td>数学</td> </tr> <tr> <td></td> <!-- 空 td 会占位，破坏列对齐 --> <td>物理</td> </tr>
- 用浏览器开发者工具选中
<table>，右侧面板 Layout 出现 “Collapsed cells” 警告，基本就是这里漏删了 <code><td><li>JS 读取 <code>tr.cells时索引偏移，往往是因为某行多写了一个<td><li>React/Vue 中若用 <code>.map()或v-for渲染，需提前聚合数据，不能靠条件渲染临时跳过——容易漏掉隐藏的<td> <h3>rowspan 和 colspan 混用时，列总数必须每行一致</h3> <p>每一行所有单元格的 <code>colspan值之和，必须等于表格逻辑总列数（通常由表头定义）。rowspan不参与这个计算，但它会让被跨越的那些行“少画”某些列——所以你要手动确保：被rowspan跳过的列，在后续行里不能靠补<td> 来凑数。<p>常见翻车点：</p> <ul><li>在带 <code>rowspan的行后面又加了colspan，结果跨列区域“歪了”——本质是前面某处少写了一个<td>，导致整行列基准偏移<li>Chrome 控制台报 “Table row has fewer cells than required”，不是 JS 错误，而是某行 <code>colspan总和 ≠ 预期列数 - 调试建议：手绘草图标出每个
rowspan覆盖范围；逐行统计colspan值之和；用元素面板看实际 DOM 结构，比代码更真实 - 用 CSS Grid 或 Flex 替代复杂表格布局，避开
rowspan的维护陷阱 - 避免在同一个
<td> 上同时设 <code>rowspan="2"和colspan="2"再叠加其他跨行单元格——嵌套越深，越难调试rowspan 本身不难写，难的是后续每次增删行、改数据结构时，都要重新核算并同步所有相关值。一个没更新，整张表就错位。
复杂合并场景下，可访问性和维护成本远高于视觉收益
多数屏幕阅读器无法正确关联被
rowspan跨过的单元格与表头，尤其当表头本身也用了rowspan或colspan时，<th scope="row"> 和 <code><th scope="col"> 的语义容易断裂。<p>真正需要长期维护或面向残障用户的表格，优先考虑：</p> <ul><li>用 <code><thead>/</thead> <tbody> + <code>headers属性显式绑定单元格与表头 - 用浏览器开发者工具选中
