colspan属性必须写在要合并的起始<td>标签里，不能写在被“吃掉”的右侧单元格中；其值为正整数，需配合text-align、vertical-align及border调整样式；与rowspan混用时须置于覆盖区域左上角单元格。
colspan属性写在哪？不是写在里就是错的
必须写在要合并的起始 <td> 标签里，而不是在它右边那些本该被“吃掉”的单元格里。很多人误以为要给每一列都加 colspan，结果表格错乱、边框重叠、甚至渲染异常。
常见错误现象：<td colspan="2">标题</td><td>（空）</td> —— 后面这个空 <td> 是多余的，浏览器会自动忽略或补全，但可能破坏样式或 JS 操作逻辑。
-
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> 或 <table> 的设置
- 垂直居中建议显式写
style="vertical-align: middle"，因为某些浏览器对合并单元格的默认行为不一致
- 如果用了
border-collapse: collapse，合并单元格的左右 border 可能消失，需额外给 <td> 加 border-right 或 border-left
和 rowspan 混用时，顺序和位置稍有差池就错位
当一个单元格既跨行又跨列，colspan 和 rowspan 必须写在同一 <td> 上，且该单元格必须出现在它所覆盖区域的“左上角”位置——也就是行索引最小、列索引最小的那个格子。
容易踩的坑：把 <td rowspan="2" colspan="3"> 放在第 2 行第 1 列，会导致第 1 行对应列缺失，浏览器强行补 <td>，后续所有单元格错位。
- 先画草图确认“左上角坐标”，再写 HTML，比边写边调快得多
- 不要指望浏览器自动修正逻辑错误；它只会按 DOM 顺序渲染，错一位，整行偏移
- 用开发者工具检查实际渲染出的 cell index，比肉眼数更可靠
JavaScript 动态设置 colspan 时，别直接改 innerHTML
通过 JS 修改已有单元格的 colspan，应该操作元素的 colSpan 属性（注意大小写），而不是拼字符串改 innerHTML。后者会销毁子节点、重置事件监听器、触发重排。
性能影响：频繁修改 colSpan 不会触发 layout thrashing，但若伴随大量样式变更或 DOM 插入，仍需节流。
- 正确写法：
cell.colSpan = 3（注意是 colSpan，不是 colspan）
- 错误写法：
cell.innerHTML = '<td colspan="3">...' ——这会清空原有内容，且丢失引用
- 如果要批量更新，先 detach 父节点、修改完再 append，减少重绘次数
真正麻烦的不是写法，而是合并后单元格的坐标计算——比如用 table.rows[i].cells[j] 访问时，j 并不等于视觉列号，需要自己跳过被 colspan 覆盖掉的位置。
必须写在要合并的起始 <td> 标签里，而不是在它右边那些本该被“吃掉”的单元格里。很多人误以为要给每一列都加 colspan，结果表格错乱、边框重叠、甚至渲染异常。
常见错误现象：<td colspan="2">标题</td><td>（空）</td> —— 后面这个空 <td> 是多余的，浏览器会自动忽略或补全，但可能破坏样式或 JS 操作逻辑。
-
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>或<table>的设置 - 垂直居中建议显式写
style="vertical-align: middle"，因为某些浏览器对合并单元格的默认行为不一致 - 如果用了
border-collapse: collapse，合并单元格的左右 border 可能消失，需额外给<td>加border-right或border-left
和 rowspan 混用时，顺序和位置稍有差池就错位
当一个单元格既跨行又跨列，colspan 和 rowspan 必须写在同一 <td> 上，且该单元格必须出现在它所覆盖区域的“左上角”位置——也就是行索引最小、列索引最小的那个格子。
容易踩的坑：把 <td rowspan="2" colspan="3"> 放在第 2 行第 1 列，会导致第 1 行对应列缺失，浏览器强行补 <td>，后续所有单元格错位。
- 先画草图确认“左上角坐标”，再写 HTML，比边写边调快得多
- 不要指望浏览器自动修正逻辑错误；它只会按 DOM 顺序渲染，错一位，整行偏移
- 用开发者工具检查实际渲染出的 cell index，比肉眼数更可靠
JavaScript 动态设置 colspan 时，别直接改 innerHTML
通过 JS 修改已有单元格的 colspan，应该操作元素的 colSpan 属性（注意大小写），而不是拼字符串改 innerHTML。后者会销毁子节点、重置事件监听器、触发重排。
性能影响：频繁修改 colSpan 不会触发 layout thrashing，但若伴随大量样式变更或 DOM 插入，仍需节流。
- 正确写法：
cell.colSpan = 3（注意是colSpan，不是colspan） - 错误写法：
cell.innerHTML = '<td colspan="3">...'——这会清空原有内容，且丢失引用 - 如果要批量更新，先 detach 父节点、修改完再 append，减少重绘次数
真正麻烦的不是写法，而是合并后单元格的坐标计算——比如用 table.rows[i].cells[j] 访问时，j 并不等于视觉列号，需要自己跳过被 colspan 覆盖掉的位置。
