colspan="2"无效的首要原因是值不合法：必须为正整数字符串，如"2"；"2px"、"two"、"0"、undefined或空字符串均被忽略，单元格默认占1列。
colspan="2"写出来但没效果？先检查值是否合法
浏览器只认纯数字字符串，colspan="2"合法，colspan="2px"、colspan="two"或colspan="0"全被忽略——单元格就当没写这个属性，仍只占 1 列。
常见翻车点：
-
colspan值必须是正整数，不能是小数、负数、带单位字符串，也不能是undefined或空字符串 - JS 模板里动态拼接时容易出错：
<td colspan="${span}">，如果 <code>span是undefined，结果就是colspan="undefined"，直接失效 - HTML 中
colspan=2（不加引号）虽能解析，但在 XML/XHTML 场景下会报错，建议统一用colspan="2" -
colspan是占位，不是样式扩展；它让一个<td> 或 <code><th> 向右连续占据 n 列位置 <li>整行所有单元格的 <code>colspan值加起来必须等于表格总列数（通常由第一行<th> 数量决定） <li>假设表头定义了 5 列，某行写了 <code><th colspan="3">汇总</th> <th>时间</th>，总和是 4 → 少一列，浏览器可能丢弃末尾或补空，DOM 已失真 - 优先在第一行用
<col width="100px">或style="width: 100px"定义每列基准宽度 - 百分比宽度要小心：
width: 60%是指占整个表格宽度的 60%，不是占三列总宽的 60% - 响应式场景中，
colspan不会自动拆分或重排，缩放屏幕时仍强行跨列，可能造成横向滚动或文字挤压 -
<td rowspan="2" colspan="2">合计</td>覆盖了 2×2 区域，但它右侧、下方、右下方三个位置都必须留空，不能出现任何<td> <li>DevTools 里边框断裂、文字挤在一起，或控制台报 <code>Table row has fewer cells than required，基本就是这里多写了一个<td> <li>JS 中访问 <code>row.cells[0]可能返回undefined，尤其在动态插入行后
colspan不是“加宽”，而是“吃掉右边相邻的单元格”
写 <td colspan="2">A</td>
<td>B</td>
<td>C</td>，这行总共算 4 列（2+1+1）。但如果其他行只有 3 列，视觉上立刻错位。
关键规则：
table-layout: fixed 下设 width 失效？因为列宽由第一行决定
一旦表格设了 table-layout: fixed，列宽就不再自适应内容，而是由第一行（或 <col>）定义。此时 colspan="3" 的单元格宽度 = 它所跨各列的宽度之和，你单独给它设 width 通常会被忽略。
想精确控制列宽：
和 rowspan 一起用时表格突然裂开？因为被覆盖的单元格没删干净
colspan 和 rowspan 共同作用不是属性叠加，而是在二维网格里划出一个 a×b 的矩形区域：左上角单元格设 rowspan="a" 和 colspan="b"，其余 a×b−1 个格子必须彻底删除——不能留空 <td></td>，也不能用注释占位。
典型错误：
最稳妥的验证方式：在 Chrome DevTools Elements 面板中右键表格 → “Edit as HTML”，临时删掉可疑 <td> 看是否恢复整齐；再逐行统计 <code>colspan 总和，对照表头列数；对含 rowspan 的单元格，手动向下数 n−1 行，确认对应列位置确实没有 <td>。</td>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
