colspan="n"表示从当前列向右跳过n−1列，整行colspan值之和必须等于表格总列数；tbody每行td数量须与thead逻辑列数严格对齐，否则导致DOM失真、读屏异常及JS取值错误。
直接说结论：用 colspan 合并表头单元格，本质是让一个 <th> 向右“占位”n列，而不是视觉拉宽——错位、读屏异常、JS取不到 row.cells，90% 都是因为列总数没对齐。
colspan="n" 的数值到底怎么算？
它表示「从当前列开始，向右连续跳过 n−1 列」，整行所有 colspan 值加起来必须等于表格声明的总列数（通常由第一行 <th> 数量决定）。
-
colspan="3"不是“变宽三倍”，而是告诉浏览器：“这一格之后的两列位置，请跳过，别放别的<th>或<td>” - 表头定义了 5 列，某行写
<th colspan="2">A</th><th>B</th><th>C</th><th>D</th>→ 总和是 2+1+1+1 = 5，合法 - 同上但多写一个
<th>E</th>→ 总和变成 6，浏览器会丢弃最后一个或补空，DOM 已失真 -
colspan="0"或colspan="1"无效或冗余，一律不写
为什么 tbody 行经常“少一格”或文字挤在一起？
因为 <thead> 用了 colspan，但 <tbody> 每行的 <td> 数量没按逻辑列数对齐。
- 第一行
<th colspan="4">销售数据</th>→ 逻辑列数 = 4，<tbody>每行就必须提供 4 列内容（比如 4 个<td>，或<td colspan="2"></td><td></td><td></td>） - 常见翻车：
<thead>是<th colspan="2">产品</th><th>时间</th>（共 3 列），<tbody>却只写 2 个<td>→ 浏览器自动补空，row.cells.length可能返回 3，但row.cells[2]是undefined - 验证方法：在 Chrome DevTools 的 Elements 面板中右键表格 → “Edit as HTML”，临时删掉可疑
<td>看是否恢复整齐
多层表头里只写 colspan 不够，必须配 rowspan
单靠 colspan 只能做扁平合并；要实现「分组标题 + 子标题」结构（如“产品”跨 3 列，下面再分“A/B/C”），必须用 rowspan 给子标题腾出垂直空间。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
<tr><th colspan="3">产品</th></tr><tr><th>A</th><th>B</th><th>C</th></tr>→ “产品”只占 1 行，第二行会顶上来，无法对齐 - 正确写法：
<tr><th colspan="3" rowspan="2">产品</th></tr><tr><th>A</th><th>B</th><th>C</th></tr>→rowspan="2"锁住第 1–2 行，“产品”占据两行高度，第二行才能放心放子标题 - 被
rowspan覆盖的位置，后续行对应列必须彻底删除<th>或<td>，留空标签或注释都会导致错位
最易被忽略的一点：浏览器几乎从不报错，colspan/rowspan 写错后，表格可能看起来“差不多”，但 JS 操作、屏幕阅读器、PDF 导出全会崩——建议每写完一层，就手动累加一遍该行的逻辑列数，并用 DevTools 的 Computed 面板核对实际渲染宽度。
