colspan属性必须写在<td>或<th>标签内，而非<tr>等其他标签；其作用是声明单元格横向跨列数，值须为正整数字符串，且各行逻辑列总数必须一致以避免错位。
colspan属性写在哪？必须是或
标签内
colspan不是
、或的属性，写错位置就完全不生效。常见错误是写成<tr colspan="2">，浏览器直接忽略——它只认<td colspan="2">或<th colspan="2">。
这个属性的作用很直接：告诉浏览器“这个单元格横向占几列”，不改变DOM结构，只影响渲染布局。
- 值必须是正整数字符串，比如
colspan="3"；写成colspan=3虽能解析，但推荐加引号防JS模板拼接出错
-
colspan="0"在绝大多数浏览器（除Firefox外）无效，别依赖它
-
colspan="two"或colspan="2px"会被当成无效值，单元格退化为占1列
怎么算每行总列数？避免表格错位的关键
HTML表格不要求每行<td>数量相同，但要求“逻辑列总数”一致——也就是所有colspan值加普通单元格数之和必须相等。
比如一行目标是5列：<td colspan="2">占2列，后面就得补3个单列<td>，或一个<td colspan="3">，不能只写2个<td>。
立即学习“前端免费学习笔记（深入）”；
- 错位现象：右侧内容整体右移、出现空白列、最后一列被挤出视口——大概率是某一行列数总和偏少或偏多
- 调试建议：用浏览器开发者工具看
Computed面板里的grid-column或列宽分布，比肉眼判断更准
- 动态生成时（如JS拼接），务必对每行做累加校验：
row.reduce((sum, cell) => sum + (cell.colspan || 1), 0)
colspan和CSS width一起用会怎样？table-layout的影响
单纯设colspan="3"不会指定具体宽度，最终列宽由表格自动分配或CSS控制。但一旦加了table-layout: fixed，行为就变了。
在fixed模式下，列宽由第一行（或<col>）决定，colspan单元格的宽度 = 它所跨各列的宽度之和。
- 给
<td colspan="3">单独设width: 200px，在table-layout: fixed下可能被忽略
- 用百分比时，
width: 60%是占整个表格宽的60%，不是三列总宽的60%，容易挤压其他列
- 响应式场景下，
colspan不会自适应“拆分”，缩屏后仍强行跨列，必要时得用媒体查询+JS重绘
合并表头时，和
要同步考虑
常见坑是<thead>里用colspan="3"合并了三列，但<tbody>里还按未合并的5列来写<td>，结果所有数据全错列。
本质是<thead>定义了列逻辑结构，<tbody>必须严格对齐这个结构——哪怕视觉上没合并，也要用colspan或空<td>占位（但空<td>不如显式colspan清晰）。
- 正确做法：先画草图标出每行每列的
colspan值，再编码；复杂表头建议用<colgroup>配合定义列宽基准
- Vue/React中别在
v-for或.map()里临时判colspan，容易漏掉隐藏列；应提前聚合数据，输出带colspan字段的结构化行数组
-
colspan和rowspan可共存于同一<td>，但后续行对应列必须彻底省略<td>，不能留空或写<td></td>
实际写的时候，最易被忽略的是“列总数一致性”和“/
结构对齐”这两点——它们不出错则一切正常，一出错就是整行偏移，很难一眼定位。
colspan不是
