colspan="2"没效果是因为值不合法，必须为纯正整数字符串；合并错位源于行总列数不一致；thead与tbody列数需严格对齐；table-layout: fixed下width失效，列宽由首行决定。
colspan="2"没效果？先查值是否合法
浏览器对 colspan 值极其挑剔，写错就静默失效，看起来像“没反应”。最常见的是把 colspan="2" 写成 colspan="2px"、colspan="two"、colspan=2（无引号）、colspan="undefined" 或 colspan="0"。这些全被忽略，单元格退化为占 1 列。
必须是纯正整数字符串：colspan="1" 等价于不写；colspan="3" 合法；colspan="-1"、colspan="1.5"、colspan="" 都无效。
动态拼接时尤其危险：<td colspan="${span}"> 若 <code>span 是 undefined 或 null，结果就是 colspan="undefined"，直接失效。稳妥写法是：<td colspan="${span || 1}"> 或提前校验类型。<h3>合并后表格错位？本质是行总列数不一致</h3>
<p><code>colspan="2" 不是“加宽”，而是“吃掉右边一个 <td> 的位置”。你写了它，那一行的后续单元格就得少写一个——否则整行列数爆炸，下一行对不齐。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<p>比如设计总列数为 4：<br>
✅ 正确：<code><tr>
<td colspan="2">标题</td>
<td>姓名</td>
<td>年龄</td>
</tr> → 2+1+1 = 4
❌ 错误：<tr>
<td colspan="2">标题</td>
<td>姓名</td>
<td>年龄</td>
<td>城市</td>
</tr> → 2+1+1+1 = 5，下一行若只写 4 个 <td>，立刻错位<p>验证方法：在控制台运行<br><code>Array.from(document.querySelectorAll('tr')[0].children).reduce((s, el) => s + (el.colSpan || 1), 0)
对每行都执行，确保结果全部相等。
表头用了colspan，tbody怎么对齐？
<thead> 和 <code><tbody> 是独立容器，但列数逻辑必须对齐。如果 <code><thead> 第一行用 <code><th colspan="3"> 定义了 3 列逻辑宽度，那么 <code><tbody> 每行所有 <code><td> 的 <code>colspan 总和也必须等于 3。
别在 <thead> 用 <code>colspan 的同时，又在 <tbody> 第一行也用 <code>colspan ——叠加会偏移基准列坐标，整张表“飘”起来。
实操建议：
- 先算出表头实际列数：Array.from(document.querySelector('thead tr:first-child').children).reduce((s, el) => s + (el.colSpan || 1), 0)
- 然后确保 <tbody> 每行都严格匹配这个数<br>
- 如果表头是分组结构（如 Q1 收入/支出），优先拆成多个 <code><th colspan="2">，而不是靠一个大 <code>colspan 加 CSS 挤宽度
table-layout: fixed 下 width 失效？因为列宽不由它定
一旦设了 table-layout: fixed，列宽就由第一行或 <col> 决定，colspan 单元格的宽度 = 它所跨各列宽度之和。你单独给它设 width: 200px，大概率被忽略。
想精确控制：
- 在第一行用 <col width="120px"> 或 <th style="width: 120px"> 定义基准列宽<br>
- 百分比要注意：<code>width: 60% 是占整个表格宽度的 60%，不是占它跨的那几列的 60%——可能撑开整行或挤压邻居
- 响应式场景中，colspan 不会自动拆分，缩屏后仍硬跨固定列数，需配合媒体查询或 JS 重绘
真正难的不是写对 colspan，而是算清每行“该有多少列”以及“哪些位置已被吞掉”。尤其当 <thead> 用了跨列，<code><tbody> 第一行必须严格对齐起始列坐标——这里漏一个空单元格，整张表就裂开了。</tbody>
