colspan 属性无兼容性问题，不生效多因拼写错误、值非法或列数不匹配；表格错位源于每行展开后列总数不一致；table-layout: fixed 下需用 精确控制跨列宽度。
colspan 属性本身没有兼容性问题——所有浏览器（Chrome、Firefox、Safari、Edge，包括 IE9+）都原生支持 colspan="2" 这类写法。所谓“不显示”“不生效”，99% 是结构错误或值非法，不是兼容性问题。
colspan="2" 不生效？先查这三件事
浏览器不会报错，但会静默忽略错误写法：
-
colspan写成了col-span、colspann或大小写混用（如ColSpan），属性名必须全小写 - 值不是纯正整数字符串：
colspan="2px"、colspan="two"、colspan="undefined"、colspan="0"全部被忽略（colspan="0"在所有现代浏览器中等同于colspan="1"） - 动态生成时变量未定义，JS 拼出
<td colspan="${span}">，而 <code>span是undefined或空字符串 → 实际输出colspan="undefined"为什么加了 colspan 表格却错位、边框断裂？
这不是渲染 bug，是逻辑列数没对齐。浏览器按“每行展开后总列数”来排布，不自动修正：
- 假设设计总列数为 5，某行写了
<td colspan="3">A</td> <td>B</td> <td>C</td> <td>D</td>→ 实际列数 = 3 + 1 + 1 + 1 = 6，下一行必然右移 <thead> 用了 <code>colspan="2"，<tbody> 每行的 <code>td数量或colspan总和没匹配表头展开后的列数（比如表头算出来是 4 列，数据行却只写了 3 个<td>） <li>验证方法：在控制台运行 <code>Array.from(tr.children).reduce((s, el) => s + (el.colSpan || 1), 0)，对每个<tr> 执行，结果必须全一致 <h3>table-layout: fixed 下 colspan 单元格宽度异常？</h3> <p>设了 <code>table-layout: fixed后，列宽由第一行或<col>定义，colspan单元格宽度 = 它所跨各列基准宽度之和：- 单独给
<td colspan="3"> 设 <code>width: 300px，大概率被忽略 - 想精确控制，优先在第一行前加
<col width="100px"> <col width="80px"> <col width="120px">，或用style="width: 100px"直接写在<col> - 百分比宽度（如
width: 60%）是占整个表格宽度的 60%，不是占它跨的那三列总宽的 60%
真正难的从来不是写对
colspan="2"，而是确保每一行“展开后”的列总数完全一致——哪怕只差 1，表格结构就不可逆地偏移，且 JS、导出、屏幕阅读器都会跟着错。- 单独给
- 假设设计总列数为 5，某行写了
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
