colspan="n"表示从当前列起向右占据n列，需确保每行逻辑列数总和一致，否则导致错位、读屏异常；多层表头须配合rowspan，响应式场景优先用Grid替代表格。
colspan 能让一个 <th> 横向占满多列，但直接写上属性不等于就“合并成功”——多数错位、错行、读屏异常，都出在列总数没对齐。
colspan="n" 是怎么算列数的
它表示「这个 <th> 向右占满 n 列」，不是“视觉上变宽”，而是从当前列起，跳过接下来 n−1 列的位置。浏览器会按这个逻辑重新排布后续单元格。
- 总列数为 5，第一行写
<th colspan="3">类别</th>，后面必须只放 2 个<th>或 1 个<th colspan="2">，否则整行列数超限 -
colspan="0"无效，会被忽略；colspan="1"等价于不写，没意义 - 别用
colspan当“撑宽工具”——想控制宽度，该用 CSS 的width或table-layout: fixed
表头合并时 tbody 行数对不上怎么办
常见翻车：第一行 <th colspan="4">销售数据</th>，第二行却写了 4 个 <td> —— 这会导致浏览器自动补空单元格，row.cells.length 可能和预期不符，JS 操作或屏幕阅读器都会出问题。
-
<thead>里用了colspan，<tbody>每行的<td>总数必须等于<thead>所声明的“逻辑列数”（即所有colspan值 + 普通单元格数之和） - 手写时建议每行都手动累加验证：比如
<th colspan="2"></th><th></th>→ 2 + 1 = 3 列，下一行也得是 3 列（如 3 个<td>，或<td colspan="3"></td>） - 用开发者工具的「Computed」面板看实际渲染列宽，比肉眼判断更可靠
多层表头里 colspan 和 rowspan 必须配对用
单写 colspan 只能做扁平合并；真要分组（比如「产品」跨 3 列，下面再分「A」「B」「C」），就必须靠 rowspan 配合留出垂直空间。
- 典型结构：
<tr><th colspan="3">产品</th></tr>+<tr><th>A</th><th>B</th><th>C</th></tr> - 如果第一行还希望「产品」同时跨 2 行，就得改成
<th colspan="3" rowspan="2">产品</th>，且第二行对应位置不能再放<th> - 二维合并时，被覆盖的所有格子必须删干净——留空标签
<td></td>或漏删都会导致错位
响应式场景下 colspan 容易被忽略的副作用
colspan 是静态声明，不会随屏幕缩放自动拆分或重排。小屏下常出现横向溢出、内容挤压，甚至触发横向滚动条。
立即学习“前端免费学习笔记（深入）”；
- 别指望媒体查询改
colspan值——HTML 属性不支持条件渲染，JS 动态重写 DOM 成本高且易出错 - 真正适配移动端，优先考虑用
display: grid或卡片式布局替代复杂表格 - 若必须保留表格，可配合
overflow-x: auto包一层容器，但注意 touch 滚动体验和焦点管理
colspan 和 rowspan 是在修改索引偏移量。改一个值，就得同步检查上下左右的单元格数量——这点最容易被跳过。 
