colspan属性是声明单元格向右吞掉n−1个相邻位置，非简单加宽；值必须为合法数字字符串，且每行列数总和须一致，否则DOM结构失真导致JS读取失败或PDF导出错位。
colspan 属性不是“加宽单元格”，而是声明这个 <td> 或 <code><th> 要**向右吞掉紧邻的 n−1 个单元格位置**。写错值、算错总列数、或没清理被覆盖的单元格，表格就会静默错位——浏览器不报错，但 JS 读取 <code>row.cells 可能返回 undefined，导出 PDF 或 Puppeteer 截图也会裂开。
colspan="2" 没效果？先查值是否合法
浏览器只认纯数字字符串，其他一律静默忽略，当没写：
-
colspan="2"✅ 合法 -
colspan=2（无引号）⚠️ 可解析但不推荐，XHTML 场景会失败 -
colspan="2px"❌ 忽略，当colspan="1" -
colspan="two"❌ 忽略 -
colspan="0"❌ 所有主流浏览器都不支持，当成 1 处理 -
colspan="${span}"中span为undefined→ 生成colspan="undefined"❌ 失效
合并后整行列总数必须一致
表格列数基准通常由第一行 <th> 个数决定（比如 6 个），后续每行所有单元格的 <code>colspan 值加起来必须严格等于 6：
- 正确：
<td colspan="3">A</td> <td colspan="2">B</td> <td>C</td>→ 3+2+1 = 6 - 错误：
<td colspan="3">A</td> <td>B</td> <td>C</td>→ 3+1+1 = 5，少 1 列，浏览器可能补空<td>，但 <code>row.cells.length会变 - 验证方法：在控制台运行
Array.from(tr.children).reduce((s, el) => s + (el.colSpan || 1), 0)，每行都应输出相同数字 - 错误写法：
<tr> <td rowspan="2" colspan="2">汇总</td> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr>→ 第二行第一个位置已被覆盖，却还写了<td>C</td>，结构崩坏 - 正确写法：
<tr> <td rowspan="2" colspan="2">汇总</td> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr>→ 第二行去掉第一个<td>，只保留两个 <li>实操建议：先画草图标出每个单元格的起始行列和跨度，再写 HTML；DevTools 里右键表格 → “Edit as HTML” 临时删单元格看是否恢复整齐</li> <h3>table-layout: fixed 下 width 不生效？因为列宽由第一行或 <col> 决定</h3> <p>设了 <code>table-layout: fixed后，colspan单元格的宽度 = 它所跨各列的宽度之和，单独给它设width通常被忽略：立即学习“前端免费学习笔记（深入）”；
- 想控制宽度，优先在第一行用
<col width="120px">或<th style="width:120px"> 定义基准 <li>百分比宽度（如 <code>width: 60%）是占整个表格宽度的 60%，不是占所跨列总宽的 60% - 响应式缩放时
colspan不会自动拆分，可能引发横向滚动或文字挤压
真正容易被忽略的是：**
colspan和rowspan是改写表格逻辑结构的声明，不是样式开关**。写错一个值，DOM 结构就已失真，但控制台什么也不提示——直到你在 React 里useEffect访问row.cells[0]返回undefined，或者导出 PDF 时纵向错位，才意识到问题不在样式层。 - 想控制宽度，优先在第一行用
和 rowspan 一起用时，必须手动删光被覆盖的所有单元格
rowspan="2" colspan="2" 是在二维网格里划出一个 2×2 区域，左上角单元格设属性，其余 3 个位置必须彻底删除——不能留空 <td></td>，也不能用注释占位：
