colspan属性值必须是纯数字字符串（如"2"），浏览器自动转为整数处理；写成colspan="2"或colspan=2均合法，但推荐加引号避免解析歧义。
colspan 值写成字符串还是数字？
HTML 中 colspan 属性值必须是**纯数字字符串**（如 "2"），但浏览器会自动将其转为整数处理；写成 colspan="2" 或 colspan=2 都合法，但推荐加引号避免解析歧义。如果误写成 colspan="2px" 或 colspan="two"，浏览器会忽略该属性，单元格只占 1 列——这是最常被忽略的错误。
常见错误现象：colspan 不生效，表格布局错乱，看起来像没写这个属性一样。
- 值必须是正整数，不能为 0、负数或小数
- 若跨列数超过当前行总列数，浏览器仍会渲染，但后续单元格可能被挤出视口或折叠
- 在动态生成 HTML（如 JS 拼接字符串）时，容易漏掉引号或拼错变量名，例如
`<td colspan="${span}">` 中 <code>span为undefined会导致colspan="undefined"，失效colspan 和 rowspan 能否同时用在一个
<td>上？可以，且很常见——比如表头需要同时横跨多列、纵跨多行。但要注意：它们作用独立，互不干扰，只是共同影响该单元格的“覆盖区域”。真正容易出问题的是后续单元格的对齐逻辑。
使用场景：复杂报表表头，如“2024 年度销售汇总”下分“华东”“华南”“华北”三列，而“销售额”又需再细分“Q1”“Q2”等子列。
立即学习“前端免费学习笔记（深入）”；
- 一个
<td colspan="3" rowspan="2">占据 3 列 × 2 行的空间 - 它后面同一行的下一个
<td>会从第 4 列开始，而不是第 2 列 - 第二行中，该单元格“下方”位置不能再放其他
<td>，否则表格结构校验失败，浏览器可能自动修正甚至丢弃单元格
用 JavaScript 动态设置 colspan 为什么有时不生效？
直接改
element.colspan属性（JS 属性）或element.setAttribute('colspan', '3')都有效，但前提是目标元素是<td>或<th>，且 DOM 已就绪。最容易踩的坑是：操作了错误的元素，或在 table 渲染前修改，或受 CSSdisplay: grid等样式干扰。性能影响：单纯改
colspan不触发重排（reflow），但若导致相邻单元格内容换行、宽度重算，可能间接引发重绘。- 检查元素是否真实存在：
console.log(tdElement)确保不是null - 避免在
td外层套div后再设colspan——colspan只对表格单元格元素有效 - 用
tdElement.colSpan = 3（注意大小写为colSpan）比 setAttribute 更快，且兼容性更好
colspan 导致表格列宽计算异常怎么办？
浏览器按 HTML 结构推导列数，
colspan本身不定义列宽，但会影响每列的“权重”。尤其当某行用了大colspan，而其他行列数少，容易让某些列被压缩到几乎看不见。解决核心是控制列基准宽度，而非依赖
colspan自动拉伸。- 给
<col>元素设width，例如<col width="120">，比用 CSSwidth更稳定 - 避免混合使用
colspan和table-layout: fixed，后者会让所有列宽严格按第一行定义，跨列单元格可能溢出 - 用
<colgroup>显式声明列数和宽度，能显著提升跨列渲染一致性
colspan看似简单，但表格结构一旦嵌套或动态变化，列计数很容易脱节。最稳妥的做法是：先手动画出表格网格草图，标清每行每列的起止位置，再写 HTML —— 这步跳过，后面调样式的时间够写两遍逻辑。 - 一个
