HTML表格中rowspan和colspan需严格遵循列基准规则：rowspan="2"时第二行同列必须留空，colspan="3"会占用右侧两列，后续单元格须跳过对应位置，否则导致DOM列数不一致、导出错乱及读屏失效。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
rowspan="2" 后第二行同一列必须留空，不是删掉 <td>
<p>很多人写完 <code><td rowspan="2">姓名</td>，下一行还照常写 <td>张三</td>，结果表格视觉错位、JS 读取 table.rows[1].cells.length 比上一行少——问题就出在这儿。rowspan="2" 表示当前单元格向下覆盖 1 行（共占 2 行），**第二行同一列不能出现任何 <td> 或 <code><th>**，连空标签都不行。
<ul>
<li>正确：第一行 <code><td rowspan="2">姓名</td>
<td>年龄</td>，第二行只写 <td>张三</td>（跳过第一列）
<td></td>
<td>张三</td> 或 <td>张三</td>
<td>25</td>，都会导致列基准偏移<thead> 中用 <code>rowspan，<tbody> 第一行对应列也必须跳过，否则浏览器自动补空 <code><td>，结构已损坏
<h3>colspan="3" 不是“变宽”，是“吃掉右边两个格子”</h3>
<p><code>colspan="3" 的本质是声明该单元格占据连续 3 列的逻辑位置，因此同一行后续不能再写被它覆盖的那两个位置的 <td>。漏删就会让整行列数膨胀，下一行对不齐。
<ul>
<li>若一行应为 5 列，写 <code><td colspan="3">标题</td>
<td>A</td>
<td>B</td> → 总列数 = 3 + 1 + 1 = 5，正确<td colspan="3">标题</td>
<td>A</td>
<td>B</td>
<td>C</td> → 实际变成 6 列，下一行 <tr> 只有 5 个子元素，DOM 列数不一致
<li>多级表头时，<code><thead> 所有行的总列数必须一致：用 <code>Array.from(tr.children).reduce((s, el) => s + (el.colSpan || 1), 0) 校验每行是否相等
同时用 rowspan 和 colspan 容易让列基准整体漂移
一个 <td rowspan="2" colspan="2"> 实际影响的是 2×2 的逻辑区块，后续两行每行都要跳过两个列位置。稍一遗漏，比如第二行少跳一个 <code><td>，后面所有列都向左/右错一位，且越往后越明显。
<ul>
<li>典型坑点：在带 <code>rowspan 的行后，紧接一个大 colspan 单元格，前面漏跳导致跨列区域“歪掉”
<table> 必须完整写在某个 <code><td> 或 <code><th> 内；直接丢进 <code><tr> 下会被浏览器踢出 DOM，<code>document.querySelector('.nested') 返回 null
<td>
<h3>导出 Excel 或屏幕阅读器失效，往往不是属性写错，而是结构漏校验</h3>
<p>HTML 表格合并没有运行时报错机制，<code>rowspan="0" 会被当成 1，colspan="6" 超出当前行列数会被静默截断——这些都不会提示你，但导出工具和读屏软件会严格按 DOM 结构解析，一错全错。
立即学习“前端免费学习笔记（深入）”；
- 动态生成表格时，别依赖 JS 后续修正；应在写入前算好每行列数并缓存跳过逻辑
- 合并非矩形区域（如第 1 行第 1 列 + 第 2 行第 3 列）无标准支持，强行 CSS 视觉合并会破坏可访问性
- 最隐蔽的问题：肉眼看着对齐，但
getBoundingClientRect().width显示某列实际宽度异常小——大概率是colspan超限后右侧留白，响应式断点下立刻暴露
