colspan="2"无效通常因值不合法：必须为正整数，如"2"，禁用"2px""two""0"或undefined；合并后需确保整行列总数一致，否则错位。
colspan="2" 写出来但没效果？先检查值是否合法
最常见的情况是 colspan 属性写了但表格没变化，大概率是值写错了。浏览器只认纯数字字符串，比如 colspan="2" 合法，colspan="2px"、colspan="two" 或 colspan="0" 全部被忽略——单元格就当没写这个属性，只占 1 列。
-
colspan值必须是正整数，不能是小数、负数或带单位的字符串 - 动态拼接时容易出错：JS 模板里写成
<td colspan="${span}">，如果 <code>span是undefined，结果就是colspan="undefined"，直接失效 - HTML 中
colspan=2（不加引号）也能解析，但推荐统一用colspan="2"，避免 XML/XHTML 场景下报错 - 假设一行总列数应为 5，第一个
<td colspan="3"> 占 3 列，后面最多只能再写 2 个普通 <code><td> <li>验证方法：在控制台运行 <code>Array.from(tr.children).reduce((s, el) => s + (el.colSpan || 1), 0)，对每个<tr> 执行，确保结果全一致 <li>特别注意 <code><thead> 和 <code><tbody> 是分开的容器，但列数逻辑必须对齐；<code><thead> 用了 <code>colspan，<tbody> 每行也得按合并后的列数来写 <h3>table-layout: fixed 下设 width 失效？因为列宽由第一行决定</h3> <p>一旦表格设了 <code>table-layout: fixed，列宽就不再自适应内容，而是由第一行（或<col>）定义。此时colspan单元格的宽度 = 它所跨各列的宽度之和，你单独给它设width通常会被忽略。- 想精确控制，优先在第一行用
<col width="100px">或style="width: 100px"定义每列基准宽度 - 百分比宽度要小心：
colspan="3"的单元格设width: 60%，是指占整个表格宽度的 60%，不是占三列总宽的 60% - 响应式场景中，
colspan不会自动拆分或重排，缩放屏幕时仍强行跨列，可能造成横向滚动或文字挤压
和 rowspan 一起用时，为什么表格突然裂开了？
同时用
colspan和rowspan不是属性冲突，而是网格坐标被改写后没同步清理周边单元格。比如一个<td rowspan="2" colspan="2"> 覆盖了 2×2 区域，那它右下方 3 个位置（同一行右侧 1 格 + 下一行同列 + 下一行右侧 1 格）都必须留空。 <ul> <li>务必先画草图，标出每个单元格的起始行列和跨度，再写代码</li> <li><code><thead> 里用了 <code>rowspan，<tbody> 第一行对应列必须跳过，不能补 <code><td> <li>调试时用开发者工具选中该单元格，看 box model 是否真正跨行跨列渲染；再检查 DOM 中下一行同列位置是否真的没有节点</li> 实际写的时候，最容易被绕进去的是“列总数一致”这个硬约束——它不报错，但错位了很难一眼看出是哪行多写了一个 <code><td>。建议手写表格时，每行手动累加列数；生成式代码则必须加运行时校验。</td> - 想精确控制，优先在第一行用
合并两列后，后面还写两个 ？那行实际变成 4 列了
colspan 不是“加宽”，而是“吃掉右边相邻的单元格”。写 <td colspan="2">A</td>
<td>B</td>
<td>C</td>，这行总共算 4 列（2+1+1），但如果其他行只有 3 列，视觉上立刻错位。
colspan 不是“加宽”，而是“吃掉右边相邻的单元格”。写 <td colspan="2">A</td>
<td>B</td>
<td>C</td>，这行总共算 4 列（2+1+1），但如果其他行只有 3 列，视觉上立刻错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
