colspan属性本质是跳过右侧n−1个单元格而非扩展宽度，值必须为正整数且全行逻辑列数须一致，thead中colspan不改变表格列数，tbody需严格对齐。
colspan 属性能直接让一个 <td> 或 <code><th> 横向占多列，但写错一行就整表错位——它不“智能合并”，只是按数值跳过后续单元格。
<h3>colspan="n" 的真实含义是“删掉右边 n−1 个单元格”</h3>
<p>很多人以为 <code>colspan="3" 是“加宽这个单元格”，其实它是告诉浏览器：“从这里开始，接下来两列别画单元格了，全归我”。所以同一行里，你不能再补那两列的 <td>。
<ul><li>若设计总列数为 4，写了 <code><td colspan="3">，后面只能再跟 1 个普通 <code><td>（3 + 1 = 4）
<li>写了 <code><td colspan="3"> 后又跟了 <code><td></td>
<td></td>
<td></td> → 这行实际变成 6 列，下一行必然错位
Array.from(tr.children).reduce((s, el) => s + (el.colSpan || 1), 0) 算出每行真实列数，确保全部相等colspan 值必须是纯正整数字符串
写成 colspan="2px"、colspan="two" 或 colspan="0" 全部无效，浏览器直接忽略，单元格退化为普通单列。
- 只接受形如
colspan="1"、colspan="5"这样的写法 -
colspan="1"和不写效果一样，没必要显式声明 - 值超过当前行剩余列数（比如剩 2 列却写
colspan="4"），多数浏览器会撑开表格，但语义错误，校验工具报Invalid value for colspan
thead 用了 colspan，tbody 行数和列数必须对齐
<thead> 里一个 <code><th colspan="3"> 并不改变表格的逻辑列数——它只是把第一行的三列“视觉上压成一格”，但浏览器仍按展开后的 3 列来对齐 <code><tbody> 中的每一行。
<ul><li><code><thead> 第一行有 <code><th colspan="3"> + <code><th> → 总列数为 4，那么 <code><tbody> 每行也必须有且仅有 4 个逻辑列（可以是 4 个普通 <code><td>，也可以是 <code><td colspan="2"> + 2 个普通 <code><td> 等组合）
<li>常见翻车点：<code><thead> 用 <code>colspan 合并后，<tbody> 还按“未合并前”的列数硬写单元格，导致右侧内容整体右移
<li>调试建议：在开发者工具中选中 <code><thead> 的 <code><tr>，看 computed width 是否均匀分布；再对比 <code><tbody> 首行的 <code>tr.cells.length
table-layout: fixed 下 colspan 单元格宽度不可控？
当表格设了 table-layout: fixed，列宽由第一行（或 <col>）决定，colspan 单元格的宽度 = 它所跨各列宽度之和。单独给它设 width 通常被忽略。
- 想控制宽度，优先在
<col>上设width，或确保第一行<tr> 的单元格宽度已明确 <li>用百分比时注意：<code>width: 60%是占整个表格宽度的 60%，不是占它跨的那几列的 60% - 响应式场景下，
colspan不会自动拆分——屏幕变窄时，它仍固执地横跨指定列数，可能溢出或挤压其他列，需配合媒体查询重排或 JS 动态重建
真正麻烦的从来不是写
colspan，而是算清“这一行到底该有几个单元格”，以及“下一行同列位置有没有偷偷多写一个 <td>”。结构一旦错位，样式再怎么调也救不回来。</td>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
