rowspan和colspan是改写表格逻辑结构的声明，非样式开关；colspan值须为正整数且每行总和等于总列数，rowspan会占用后续行对应列位置，混用时需删除被覆盖单元格并动态校验列数。
rowspan 和 colspan 不是“让表格看起来整齐”的样式开关，而是直接改写表格逻辑结构的声明。写错一个值，row.cells 就可能返回 undefined，打印 PDF 时纵向错位，React 渲染 tbody 会跳行——而且浏览器根本不报错。
colspan="n" 的列数怎么算才不崩
它不是“加宽”，是“占位”：一个 <th colspan="3"> 表示这个单元格向右连续占据 3 列位置，整行所有 <code><td> 和 <code><th> 的 <code>colspan 值加起来，必须等于该表格的总列数（通常由第一行 <th> 数量决定）。
<ul>
<li>表头有 4 列 → 每行所有单元格的 <code>colspan 总和必须是 4
<th colspan="2">A</th>
<th>B</th>
<th>C</th> ✅（2+1+1=4）<th colspan="2">A</th>
<th>B</th>
<th>C</th>
<th>D</th> ❌（2+1+1+1=5），浏览器会忽略最后一个或补空单元格，DOM 结构已失真colspan="2" 有效，colspan="2px" 或 colspan="two" 会被完全忽略rowspan="n" 为什么会让下一行少写 <td>
<p><code>rowspan 不是“拉高单元格”，而是“锁定列位置”：从当前行起，接下来 n−1 行里，该列位置被永久占用，后续 <tr> 中对应列不能再出现任何 <code><td> 或 <code><th>。
<ul>
<li>
<code><tr>
<td rowspan="3">汇总</td>
<td>Q1</td>
</tr> → 下一行必须只写 <tr><td>Q2</td></tr>（第 1 列已被占，只剩第 2 列可填）
<td>Q2</td>
<td>Q3</td>，浏览器会渲染成 2 列，但 JS 中 row.cells[0] 可能为 undefined，尤其在动态插入行后更明显<td> 数量公式：<strong>该行应有 <code><td> 数 = 总列数 − 当前已被上层 <code>rowspan 占用的列数
同时用 rowspan 和 colspan 时最常漏掉的三件事
这不是属性叠加，是在二维表格矩阵中划出一个矩形区域：左上角单元格设 rowspan="a" 和 colspan="b"，其余被覆盖的 a×b−1 个格子必须彻底删除——不能留空 <td></td>，也不能用注释占位。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 删干净：比如
<td rowspan="2" colspan="3">标题</td>覆盖了 5 个格子（2×3−1），其余 5 个位置在 HTML 中必须完全不存在 - 对齐总列数：若第 1 列已被
rowspan占用，则同一行中colspan="3"必须从第 2 列开始算起，整行仍需凑够总列数（例如总列数为 5，已占 1 列，剩下 4 列要靠colspan="3"+<td> = 3+1 实现） <li>检查后续两行：改了一个 <code>rowspan="2"，就得立刻确认下面两行各自还剩几个<td> 可写——这才是真正难维护的地方，也是多数人卡住的位置 <p>真正难的从来不是第一次写对 <code>colspan="2"，而是在改完第三处rowspan后，忘了顺手重算后面两行的单元格数量，结果导出 PDF 时整列偏移两行，却查不出哪行少写了<td>。</td>
