colspan无效的主因是值不合法或后续单元格未删除：必须为正整数字符串（如colspan="2"），禁用单位、文字、零或负数；合并后需删掉被覆盖的td；thead与tbody逻辑列数须一致；table-layout:fixed下width失效，应通过设置基准宽。
colspan 属性写对了但没效果？不是浏览器问题，大概率是值不合法或后续单元格没删干净。
colspan 值必须是正整数字符串
浏览器只接受 colspan="2" 这种纯数字字符串。以下写法全部失效：
-
colspan="2px"（带单位） -
colspan="two"（非数字） -
colspan="0"或colspan="-1"（非正整数） -
colspan="${span}"中span为undefined或null，结果变成colspan="undefined"
动态生成时务必做兜底：colspan="${span || 1}"，避免空值穿透。
合并后必须删掉被覆盖的 <td>
<p><code>colspan="3" 不是“加宽”，而是“占位”——它让当前单元格逻辑上横跨 3 列，因此同一行中它右侧原本该有的 2 个 <td> 必须删除，否则整行列数会超。
<p>例如：</p>
<pre class="brush:php;toolbar:false;"><tr>
<td colspan="3">标题</td>
<td>A</td>
<td>B</td>
</tr></pre>
<p>这行实际有 5 列（3+1+1），但如果其他行只有 3 列，表格立刻错位。正确写法是：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img
src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a>
<p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<pre class="brush:php;toolbar:false;"><tr>
<td colspan="3">标题</td>
</tr></pre>
<h3><code><thead> 和 <code><tbody> 列数必须对齐
<p><code><thead> 里用了 <code>colspan="2"，那它定义的逻辑列数就变了，<tbody> 每一行也得按这个新列数来排布。
<p>常见错误：</p>
<ul><li><code><thead> 中 <code><th colspan="2">姓名</th>
<th>年龄</th> → 逻辑共 3 列
<tbody> 却写 <code><td>张三</td>
<td>25</td> → 只有 2 列，错位
验证方式：在控制台运行 Array.from(tr.children).reduce((s, el) => s + (el.colSpan || 1), 0)，确保每行结果一致。
table-layout: fixed 下 width 失效的真相
设了 table-layout: fixed 后，<td colspan="2"> 的宽度由它所跨的两列基准宽之和决定，单独设 <code>width 会被忽略。
想精确控制：
- 优先用
<col width="120">或<col style="width: 120px">定义各列基准宽 - 百分比宽度如
width: 60%是相对于整个表格宽度，不是所跨列总宽 - 响应式缩放时
colspan不拆分，可能触发横向滚动，需配合overflow-x: auto或媒体查询处理
跨行跨列混用时，坐标系统容易崩——先画草图标好每个单元格的起始行列和跨度，再写代码，比反复调试快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
