colspan属性必须写在要合并的起始标签里，不能写在被“吃掉”的右侧单元格中；其值为正整数，需配合text-align、vertical-align及border调整样式；与rowspan混用时须置于覆盖区域左上角单元格。
colspan属性写在哪？不是写在里就是错的
必须写在要合并的起始 <td> 标签里，而不是在它右边那些本该被“吃掉”的单元格里。很多人误以为要给每一列都加 <code>colspan，结果表格错乱、边框重叠、甚至渲染异常。
常见错误现象：<td colspan="2">标题</td>
<td>（空）</td> —— 后面这个空 <td> 是多余的，浏览器会自动忽略或补全，但可能破坏样式或 JS 操作逻辑。
<ul>
<li>
<code>colspan 的值必须是正整数，不能为 0 或负数，否则被忽略
如果某行总列数（含 colspan 展开后）超过表头定义的列数，表格会撑宽，但不会报错
用 CSS Grid 或 Flex 布局替代复杂合并时，colspan 可能失效——它只对传统 table 渲染生效
合并后怎么对齐内容？text-align 和 vertical-align 都得手动调
默认情况下，colspan 单元格的内容左对齐、居中对齐（vertical-align: middle），但一旦合并多列，视觉上容易偏左或显得拥挤，尤其配合 padding 或 border-collapse: collapse 时。
使用场景：报表标题、分类汇总栏、带图标+文字的长内容单元格。
- 水平居中用
style="text-align: center"，别依赖父级 <tr> 或 <code><table> 的设置
<li>垂直居中建议显式写 <code>style="vertical-align: middle"，因为某些浏览器对合并单元格的默认行为不一致
- 如果用了
border-collapse: collapse，合并单元格的左右 border 可能消失，需额外给 <td> 加 <code>border-right 或 border-left
和 rowspan 混用时，顺序和位置稍有差池就错位
当一个单元格既跨行又跨列，colspan 和 rowspan 必须写在同一 <td> 上，且该单元格必须出现在它所覆盖区域的“左上角”位置——也就是行索引最小、列索引最小的那个格子。
<p>容易踩的坑：把 <code><td rowspan="2" colspan="3"> 放在第 2 行第 1 列，会导致第 1 行对应列缺失，浏览器强行补 <code><td>，后续所有单元格错位。
<ul>
<li>先画草图确认“左上角坐标”，再写 HTML，比边写边调快得多</li>
<li>不要指望浏览器自动修正逻辑错误；它只会按 DOM 顺序渲染，错一位，整行偏移</li>
<li>用开发者工具检查实际渲染出的 cell index，比肉眼数更可靠</li>
</ul>
<h3>JavaScript 动态设置 colspan 时，别直接改 innerHTML</h3>
<p>通过 JS 修改已有单元格的 <code>colspan，应该操作元素的 colSpan 属性（注意大小写），而不是拼字符串改 innerHTML。后者会销毁子节点、重置事件监听器、触发重排。
性能影响：频繁修改 colSpan 不会触发 layout thrashing，但若伴随大量样式变更或 DOM 插入，仍需节流。
- 正确写法：
cell.colSpan = 3（注意是 colSpan，不是 colspan）
- 错误写法：
cell.innerHTML = '<td colspan="3">...' ——这会清空原有内容，且丢失引用
<li>如果要批量更新，先 detach 父节点、修改完再 append，减少重绘次数</li>
<p>真正麻烦的不是写法，而是合并后单元格的坐标计算——比如用 <code>table.rows[i].cells[j] 访问时，j 并不等于视觉列号，需要自己跳过被 colspan 覆盖掉的位置。
必须写在要合并的起始 <td> 标签里，而不是在它右边那些本该被“吃掉”的单元格里。很多人误以为要给每一列都加 <code>colspan，结果表格错乱、边框重叠、甚至渲染异常。
常见错误现象：<td colspan="2">标题</td>
<td>（空）</td> —— 后面这个空 <td> 是多余的，浏览器会自动忽略或补全，但可能破坏样式或 JS 操作逻辑。
<ul>
<li>
<code>colspan 的值必须是正整数，不能为 0 或负数，否则被忽略
colspan 展开后）超过表头定义的列数，表格会撑宽，但不会报错colspan 可能失效——它只对传统 table 渲染生效合并后怎么对齐内容？text-align 和 vertical-align 都得手动调
默认情况下，colspan 单元格的内容左对齐、居中对齐（vertical-align: middle），但一旦合并多列，视觉上容易偏左或显得拥挤，尤其配合 padding 或 border-collapse: collapse 时。
使用场景：报表标题、分类汇总栏、带图标+文字的长内容单元格。
- 水平居中用
style="text-align: center"，别依赖父级<tr> 或 <code><table> 的设置 <li>垂直居中建议显式写 <code>style="vertical-align: middle"，因为某些浏览器对合并单元格的默认行为不一致 - 如果用了
border-collapse: collapse，合并单元格的左右 border 可能消失，需额外给<td> 加 <code>border-right或border-left和 rowspan 混用时，顺序和位置稍有差池就错位
当一个单元格既跨行又跨列，
colspan和rowspan必须写在同一<td> 上，且该单元格必须出现在它所覆盖区域的“左上角”位置——也就是行索引最小、列索引最小的那个格子。 <p>容易踩的坑：把 <code><td rowspan="2" colspan="3"> 放在第 2 行第 1 列，会导致第 1 行对应列缺失，浏览器强行补 <code><td>，后续所有单元格错位。 <ul> <li>先画草图确认“左上角坐标”，再写 HTML，比边写边调快得多</li> <li>不要指望浏览器自动修正逻辑错误；它只会按 DOM 顺序渲染，错一位，整行偏移</li> <li>用开发者工具检查实际渲染出的 cell index，比肉眼数更可靠</li> </ul> <h3>JavaScript 动态设置 colspan 时，别直接改 innerHTML</h3> <p>通过 JS 修改已有单元格的 <code>colspan，应该操作元素的colSpan属性（注意大小写），而不是拼字符串改innerHTML。后者会销毁子节点、重置事件监听器、触发重排。性能影响：频繁修改
colSpan不会触发 layout thrashing，但若伴随大量样式变更或 DOM 插入，仍需节流。- 正确写法：
cell.colSpan = 3（注意是colSpan，不是colspan） - 错误写法：
cell.innerHTML = '<td colspan="3">...' ——这会清空原有内容，且丢失引用 <li>如果要批量更新，先 detach 父节点、修改完再 append，减少重绘次数</li> <p>真正麻烦的不是写法，而是合并后单元格的坐标计算——比如用 <code>table.rows[i].cells[j]访问时，j并不等于视觉列号，需要自己跳过被colspan覆盖掉的位置。
- 正确写法：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
