colspan="2"需删除被合并位置的对应，否则表格错位；它表示该单元格占用两列，而非单纯变宽，且值必须为纯数字。
直接用 colspan="2"，但必须删掉被合并位置上原本该写的另一个 <td>，否则表格会错位。
<h3>colspan="2" 怎么写才不崩</h3>
<p>很多人以为加个属性就完事，结果渲染出来列对不上、边框断开、内容挤成一团——根本原因是没删掉被占位的单元格。</p>
<ul><li>
<code>colspan="2" 不是“让这个单元格变宽”，而是“它吃掉右边一列的位置”，所以同一行里，你得少写一个 <td>
<li>错误写法：<code><tr>
<td colspan="2">标题</td>
<td>A</td>
<td>B</td>
</tr> → 这行实际占了 4 列（2+1+1），而下一行如果只写两个 <td>，就会错行
<li>正确写法：<code><tr>
<td colspan="2">标题</td>
<td>B</td>
</tr>（假设原为 3 列，合并前两列，则只剩 1 个剩余单元格）
colspan="2" 有效，colspan="2px" 或 colspan="two" 会被浏览器忽略为什么开发者工具里看到列宽不对
不是 colspan 没生效，而是 CSS 的 table-layout: fixed 或 border-collapse: collapse 放大了结构不一致的问题。
- 启用
table-layout: fixed时，浏览器按第一行定义列宽，后续行若列数逻辑不一致，内容会被强行挤压或溢出 - 用浏览器「Elements」面板看实际渲染的
td数量，再对照「Computed」里的width，能快速定位是结构问题还是样式干扰 - 如果合并后某列莫名变窄，大概率是相邻行写了过多
<td>，导致浏览器自动补空单元格，打乱了列宽分配 <h3>合并表头时<tbody>最容易漏掉的坑 <p><code><thead> 里用了 <code>colspan="2"，但<tbody> 还按未合并的列数写单元格，这是最常导致整张表错位的操作。 <ul><li>例如：<code><th colspan="2">姓名信息</th> <th>年龄</th>→ 这行共 3 列（2+1），那么每行<td> 也必须贡献总和为 3 的列数 <li>对应数据行不能写成：<code><td>张三</td> <td>25</td>（只有 2 列，缺 1） - 应写成：
<td>张三</td> <td>男</td> <td>25</td>，或<td colspan="2">张三/男</td> <td>25</td> - 建议手写时在每行末尾标注累计列数，比如 “// =3”，避免靠肉眼数漏
真正难的不是写 colspan，而是算清楚“这一行到底该有几个单元格”，尤其跨多行或多级表头时，少删一个 <td> 就全乱了。</td>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
