HTML表格中rowspan和colspan需严格遵循列基准规则：rowspan="2"时第二行同列必须留空，colspan="3"会占用右侧两列，后续单元格须跳过对应位置，否则导致DOM列数不一致、导出错乱及读屏失效。

rowspan="2" 后第二行同一列必须留空，不是删掉

很多人写完 姓名，下一行还照常写 张三，结果表格视觉错位、JS 读取 table.rows[1].cells.length 比上一行少——问题就出在这儿。rowspan="2" 表示当前单元格向下覆盖 1 行（共占 2 行），**第二行同一列不能出现任何 或 **，连空标签都不行。

• 正确：第一行 姓名 年龄，第二行只写 张三（跳过第一列）
• 错误：第二行写成 张三 或 张三 25，都会导致列基准偏移
• 在 中用 rowspan， 第一行对应列也必须跳过，否则浏览器自动补空 ，结构已损坏

  colspan="3" 不是“变宽”，是“吃掉右边两个格子”

  colspan="3" 的本质是声明该单元格占据连续 3 列的逻辑位置，因此同一行后续不能再写被它覆盖的那两个位置的 。漏删就会让整行列数膨胀，下一行对不齐。

  • 若一行应为 5 列，写 标题 A B → 总列数 = 3 + 1 + 1 = 5，正确
  • 若写成 标题 A B C → 实际变成 6 列，下一行 只有 5 个子元素，DOM 列数不一致
  • 多级表头时， 所有行的总列数必须一致：用 Array.from(tr.children).reduce((s, el) => s + (el.colSpan || 1), 0) 校验每行是否相等

    同时用 rowspan 和 colspan 容易让列基准整体漂移

    一个 实际影响的是 2×2 的逻辑区块，后续两行每行都要跳过两个列位置。稍一遗漏，比如第二行少跳一个 ，后面所有列都向左/右错一位，且越往后越明显。

    • 典型坑点：在带 rowspan 的行后，紧接一个大 colspan 单元格，前面漏跳导致跨列区域“歪掉”
    • 嵌套 必须完整写在某个 下会被浏览器踢出 DOM，document.querySelector('.nested') 返回 null
      开发者工具 Layout 面板出现 “Collapsed cells” 警告，基本就是某处没跳过该写的

      或

      内；直接丢进

      导出 Excel 或屏幕阅读器失效，往往不是属性写错，而是结构漏校验 HTML 表格合并没有运行时报错机制，rowspan="0" 会被当成 1，colspan="6" 超出当前行列数会被静默截断——这些都不会提示你，但导出工具和读屏软件会严格按 DOM 结构解析，一错全错。 DeepBI DHTML 页面生成器 生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur 下载 动态生成表格时，别依赖 JS 后续修正；应在写入前算好每行列数并缓存跳过逻辑 合并非矩形区域（如第 1 行第 1 列 + 第 2 行第 3 列）无标准支持，强行 CSS 视觉合并会破坏可访问性 最隐蔽的问题：肉眼看着对齐，但 getBoundingClientRect().width 显示某列实际宽度异常小——大概率是 colspan 超限后右侧留白，响应式断点下立刻暴露

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