colspan属性能实现跨列合并，但值必须为正整数字符串（如"2"），禁用"2px""two""0""undefined"等非法写法；每行所有单元格colspan总和必须严格一致，否则表格错位；thead与tbody列逻辑须对齐，table-layout:fixed下宽度由首行或<col>定义。
colspan 属性能直接实现跨列合并，但写错值、漏删单元格、列数不齐，表格立刻错位或无效。
colspan="2" 为什么没效果？检查这三类常见写法错误
浏览器只接受纯数字字符串作为 colspan 值，其他形式一律忽略，等同于没写：
-
colspan="2px"、colspan="two"、colspan="0"、colspan="undefined"全部失效 -
colspan=2（不加引号）虽可解析，但在 XHTML 或严格校验场景下可能报错，统一用colspan="2" - 动态拼接时 JS 变量未定义，如
<td colspan="${span}">中span是undefined，结果就是colspan="undefined"
合并两列后，后面还能写几个 <td>？必须算总列数
colspan 不是“加宽”，而是“吃掉右侧相邻单元格”。一行的总列数 = 所有 <td> 的 colSpan 值之和（没写默认为 1）。列数不一致，整行就错位：
- 假设目标总列数是 5：
<td colspan="3">A</td><td>B</td><td>C</td>合法（3+1+1=5） - 但写成
<td colspan="3">A</td><td>B</td><td>C</td><td>D</td>就变成 6 列，其他行若仍是 5 列，视觉上立刻偏移 - 验证方法：在控制台运行
Array.from(tr.children).reduce((s, el) => s + (el.colSpan || 1), 0)，对每个<tr>执行，确保结果全相同
<thead> 用了 colspan，<tbody> 怎么对齐？别忘了它们是独立容器
<thead> 和 <tbody> 是分离的 DOM 容器，但列逻辑必须对齐。如果表头第一行用了 colspan="2"，意味着它“代表”2列，那 <tbody> 每行也得按合并后的列数来组织：
立即学习“前端免费学习笔记（深入）”；
- 错误示例：
<thead><tr><th colspan="2">姓名</th></tr></thead>，但<tbody><tr><td>张三</td><td>李四</td></tr></tbody>—— 这里<tbody>一行写了 2 个普通<td>，实际列数是 2，而表头“算作”2 列，表面看对得上；但如果表头还有第二行<tr><th>名</th><th>姓</th></tr>，那它实际是 2 列，和第一行colspan="2"对齐，此时<tbody>每行就必须也是 2 列 - 关键点：不是看 HTML 写了几对
<td>，而是看每行“算出来”的列总数是否一致 -
<thead>有rowspan时，<tbody>第一行对应列要跳过（即少写一个<td>），否则会覆盖或错位
table-layout: fixed 下设 width 为啥不生效？列宽由第一行或 <col> 决定
一旦设置 table-layout: fixed，表格列宽就不再自适应内容，而是由第一行（或显式 <col>）定义。此时给 colspan 单元格单独设 width，通常被忽略：
- 正确做法：优先在第一行用
<col width="120px">或<col style="width: 120px">定义基准列宽 -
colspan="3"的单元格设width: 60%，是指占整个表格宽度的 60%，不是占它所跨三列总宽的 60% - 响应式缩放时，
colspan不会自动拆分，可能导致文字挤压或横向滚动条出现
最易被忽略的是：跨列合并后，你删掉了被合并的单元格，但没同步检查整行列总数是否和其他行一致——哪怕只差 1，表格结构就塌了。手动数、用脚本验、开开发者工具看 Layout 面板里的 “Collapsed cells” 提示，比反复刷新页面更省时间。
