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 不跨 / 边界生效，别指望表头的 rowspan 能拉到表体里

  被跨过的行必须彻底省略对应列的 标签

  这是错位最常见原因：rowspan 不是“覆盖”，而是“占位+跳过”。设置了 rowspan="3" 后，后续两行同一列位置**不能出现任何 或 **，包括空标签或 。

  ✅ 正确结构：

  <tr>
  <td rowspan="3">张老师</td>
    <td>数学</td>
  </tr><tr>
  <td>物理</td> <!-- 第一列完全省略 -->
  </tr><tr>
  <td>化学</td> <!-- 第一列完全省略 -->
  </tr>

  ❌ 错误写法（会导致列偏移、DOM 结构错乱）：

  

  Wechat Article Html

  将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

  下载

  <tr>
  <td rowspan="3">张老师</td>
    <td>数学</td>
  </tr><tr>
  <td></td> <!-- 空 td 会占位，破坏列对齐 -->
    <td>物理</td>
  </tr>

  • 用浏览器开发者工具选中 ，右侧面板 Layout 出现 “Collapsed cells” 警告，基本就是这里漏删了 / + headers 属性显式绑定单元格与表头
    用 CSS Grid 或 Flex 替代复杂表格布局，避开 rowspan 的维护陷阱
    避免在同一个

    JS 读取 tr.cells 时索引偏移，往往是因为某行多写了一个	React/Vue 中若用 .map() 或 v-for 渲染，需提前聚合数据，不能靠条件渲染临时跳过——容易漏掉隐藏的	rowspan 和 colspan 混用时，列总数必须每行一致 每一行所有单元格的 colspan 值之和，必须等于表格逻辑总列数（通常由表头定义）。rowspan 不参与这个计算，但它会让被跨越的那些行“少画”某些列——所以你要手动确保：被 rowspan 跳过的列，在后续行里不能靠补	来凑数。 常见翻车点： 在带 rowspan 的行后面又加了 colspan，结果跨列区域“歪了”——本质是前面某处少写了一个	，导致整行列基准偏移 Chrome 控制台报 “Table row has fewer cells than required”，不是 JS 错误，而是某行 colspan 总和 ≠ 预期列数 调试建议：手绘草图标出每个 rowspan 覆盖范围；逐行统计 colspan 值之和；用元素面板看实际 DOM 结构，比代码更真实 复杂合并场景下，可访问性和维护成本远高于视觉收益 多数屏幕阅读器无法正确关联被 rowspan 跨过的单元格与表头，尤其当表头本身也用了 rowspan 或 colspan 时，	和	的语义容易断裂。 真正需要长期维护或面向残障用户的表格，优先考虑： 用
    上同时设 rowspan="2" 和 colspan="2" 再叠加其他跨行单元格——嵌套越深，越难调试 rowspan 本身不难写，难的是后续每次增删行、改数据结构时，都要重新核算并同步所有相关值。一个没更新，整张表就错位。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！