colspan 的本质是“跳过后续 n−1 列位置”，而非单纯变宽；常见误用包括错设值、未同步删减同行单元格、忽略 thead/tbody 列数对齐，导致表格错位。
colspan 不是“让单元格变宽”，而是“跳过后面几个列位置”。写错值或没同步删减同行其他单元格，表格立刻错位。
colspan="n" 的真实含义和常见误用
浏览器解析 colspan 时，会把该 <td> 或 <code><th> 当作占用了 n 列，并自动跳过后续 n−1 个列位置。它不改变 DOM 结构，只影响渲染坐标。
<ul><li>写 <code>colspan="3" 后，同一行再写三个 <td>，实际列数变成 4（3+1），不是你想要的 3 列对齐
<li>
<code>colspan="0" 在所有主流浏览器中被忽略，无效；不要依赖它做逻辑判断
colspan="-1" 或 colspan="abc" 会被当成 1 处理，且控制台可能报 warning确保每行总列数一致的实操方法
表格错位几乎都源于某一行的“有效列数”和其他行不等。所谓有效列数 = 所有 <td> 的 <code>colSpan 值之和（没设 colspan 的按 1 计）。
- 手写时，逐行心算：比如
<td colspan="2"></td> <td></td>这行就是 3 列 - 调试时，在控制台运行：
Array.from(document.querySelectorAll('tr')[0].children).reduce((s, el) => s + (el.colSpan || 1), 0)，对比各行结果 - 特别注意
<thead> 和 <code><tbody> 是独立的 <code><tr> 容器，但列数必须对齐——<code><thead> 里用了 <code>colspan="3"，<tbody> 每行也得是 3 列（不管怎么拆） <h3>与 CSS width / table-layout 的配合陷阱</h3> <p>单纯设 <code>colspan不指定宽度，最终效果受table-layout控制。默认auto下浏览器自适应；设成fixed后，列宽由第一行或<col>决定。- 在
table-layout: fixed下，给colspan="2"的单元格设width: 200px，它会强行撑开两列总宽为 200px，可能挤压邻列 - 用百分比时，
width: 60%是占整个表格宽度的 60%，不是占它跨的那两列的 60% - 响应式场景下，
colspan不会随屏幕缩放自动“拆分”，需要 JS 监听resize或用媒体查询重绘结构
多层表头中 colspan 的典型组合写法
复杂表头必须用
colspan+rowspan配合，单靠colspan只能铺平，不能立起来。- 先画草图标出每个单元格的起始行列和跨度，再编码——别靠脑子硬算坐标
- 例如：第一行
<th colspan="3">销售数据</th>，第二行三个子项<th>A</th> <th>B</th> <th>C</th>，这是合法的；但如果第二行只写两个<th>，就缺一列 <li><code><thead> 中用了 <code>rowspan="2"，那么第二行对应列必须留空，同时该列在<tbody> 第一行也必须跳过，否则视觉裂开 <p>最常被忽略的点：合并不是样式操作，是结构重定义。写完 <code>colspan，必须同步检查并修正同行其余单元格数量，以及跨区域（如thead/tbody）的列对齐——漏掉任意一环，表格就偏了。
- 在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
