column-span在HTML表格中无效，必须用colspan属性实现跨列；colspan是HTML属性而非CSS，值须为正整数且每行总和必须严格等于逻辑列数，否则导致结构错位。
column-span 在表格中根本不起作用
HTML 表格（<table>）里的 column-span CSS 属性是无效的——它只对多列布局（columns）生效，比如用 column-count 或 column-width 创建的文本分栏。表格单元格的跨列必须靠 colspan 属性，不是 CSS。
常见错误是写成这样：
<td style="column-span: 3">标题</td>
结果完全没反应。浏览器会忽略该声明，因为 <td> 不是多列容器的子元素。
正确做法：用 colspan 配合 <th> 做跨列标题
表格标题行应使用 <th>，并设置 colspan 属性指定跨几列：
立即学习“前端免费学习笔记（深入）”；
<table>
<thead>
<tr><th colspan="3">销售汇总（2024 Q1）</th></tr>
<tr><th>区域</th><th>销售额</th><th>完成率</th></tr>
</thead>
<tbody>
<tr><td>华东</td><td>¥120,000</td><td>102%</td></tr>
</tbody>
</table>
要点：
-
colspan是 HTML 属性，不是 CSS；值必须是正整数，不能是"auto"或表达式 - 跨列数必须严格等于当前行其他单元格的列宽总和，否则表格结构会错乱
- 如果用了
<colgroup>定义列宽，colspan仍按逻辑列数计算，不按像素宽度
想用 CSS 控制跨列标题样式？可以但有限制
colspan 本身不提供样式能力，但你可以给跨列的 <th> 加 CSS：
<th colspan="3" style="text-align: center; background: #f0f8ff; padding: 12px 0;">销售汇总（2024 Q1）</th>
注意这些实际限制：
- 无法用 CSS 拆分或合并已渲染的单元格——
colspan必须在 HTML 中声明 - 响应式场景下，不要依赖 JS 动态改
colspan值，容易破坏语义和屏幕阅读器识别 - 如果表格有固定列宽（如
table-layout: fixed），跨列<th>的宽度由其所在列的合计宽度决定，而非内容撑开
替代方案：什么时候该放弃表格结构？
当标题需要真正“悬浮”“跨多组列”或“与数据行错位对齐”时，表格语义已不适用。例如：
- 带折叠分组的报表（如“华北”下含“北京”“天津”两列，“华南”下含“广州”“深圳”）
- 标题需横跨部分列且右侧留空（如前 2 列标题 + 后 1 列操作按钮）
- 需要响应式隐藏某些列但保留标题完整性
这时更适合用 <div> + CSS Grid 或 Flex 布局模拟表格视觉，用 role="table" 等 ARIA 属性保可访问性。硬套 <table> 反而会让 colspan 逻辑变得脆弱难维护。
真正容易被忽略的是：表格的语义边界——它描述的是二维关系数据，不是任意排版容器。跨列标题一旦超出单层逻辑，就该重新评估结构是否还属于表格范畴。
