colspan属性本质是跳过右侧n−1个单元格而非扩展宽度，值必须为正整数且全行逻辑列数须一致，thead中colspan不改变表格列数，tbody需严格对齐。
colspan 属性能直接让一个 <td> 或 <th> 横向占多列，但写错一行就整表错位——它不“智能合并”，只是按数值跳过后续单元格。
colspan="n" 的真实含义是“删掉右边 n−1 个单元格”
很多人以为 colspan="3" 是“加宽这个单元格”，其实它是告诉浏览器：“从这里开始，接下来两列别画单元格了，全归我”。所以同一行里，你不能再补那两列的 <td>。
- 若设计总列数为 4，写了
<td colspan="3">，后面只能再跟 1 个普通<td>（3 + 1 = 4） - 写了
<td colspan="3">后又跟了<td></td><td></td><td></td>→ 这行实际变成 6 列，下一行必然错位 - 验证方法：用
Array.from(tr.children).reduce((s, el) => s + (el.colSpan || 1), 0)算出每行真实列数，确保全部相等
colspan 值必须是纯正整数字符串
写成 colspan="2px"、colspan="two" 或 colspan="0" 全部无效，浏览器直接忽略，单元格退化为普通单列。
- 只接受形如
colspan="1"、colspan="5"这样的写法 -
colspan="1"和不写效果一样，没必要显式声明 - 值超过当前行剩余列数（比如剩 2 列却写
colspan="4"），多数浏览器会撑开表格，但语义错误，校验工具报Invalid value for colspan
thead 用了 colspan，tbody 行数和列数必须对齐
<thead> 里一个 <th colspan="3"> 并不改变表格的逻辑列数——它只是把第一行的三列“视觉上压成一格”，但浏览器仍按展开后的 3 列来对齐 <tbody> 中的每一行。
-
<thead>第一行有<th colspan="3">+<th>→ 总列数为 4，那么<tbody>每行也必须有且仅有 4 个逻辑列（可以是 4 个普通<td>，也可以是<td colspan="2">+ 2 个普通<td>等组合） - 常见翻车点：
<thead>用colspan合并后，<tbody>还按“未合并前”的列数硬写单元格，导致右侧内容整体右移 - 调试建议：在开发者工具中选中
<thead>的<tr>，看 computed width 是否均匀分布；再对比<tbody>首行的tr.cells.length
table-layout: fixed 下 colspan 单元格宽度不可控？
当表格设了 table-layout: fixed，列宽由第一行（或 <col>）决定，colspan 单元格的宽度 = 它所跨各列宽度之和。单独给它设 width 通常被忽略。
立即学习“前端免费学习笔记（深入）”；
- 想控制宽度，优先在
<col>上设width，或确保第一行<tr>的单元格宽度已明确 - 用百分比时注意：
width: 60%是占整个表格宽度的 60%，不是占它跨的那几列的 60% - 响应式场景下，
colspan不会自动拆分——屏幕变窄时，它仍固执地横跨指定列数，可能溢出或挤压其他列，需配合媒体查询重排或 JS 动态重建
colspan，而是算清“这一行到底该有几个单元格”，以及“下一行同列位置有没有偷偷多写一个 <td>”。结构一旦错位，样式再怎么调也救不回来。 
