column-span在html表格中无效，必须用colspan属性实现跨列；colspan是html属性而非css，值须为正整数且每行总和必须严格等于逻辑列数，否则导致结构错位。
column-span 在表格中根本不起作用
HTML 表格（<table>）里的 <code>column-span CSS 属性是无效的——它只对多列布局（columns）生效，比如用 column-count 或 column-width 创建的文本分栏。表格单元格的跨列必须靠 colspan 属性，不是 CSS。
常见错误是写成这样：
<td style="column-span: 3">标题</td>
结果完全没反应。浏览器会忽略该声明，因为 <td> 不是多列容器的子元素。
<h3>正确做法：用 <code>colspan 配合 <th> 做跨列标题
<p>表格标题行应使用 <code><th>，并设置 <code>colspan 属性指定跨几列：
| 销售汇总（2024 Q1） | ||
|---|---|---|
| 区域 | 销售额 | 完成率 |
| 华东 | ¥120,000 | 102% |
要点：
-
colspan是 HTML 属性，不是 CSS；值必须是正整数，不能是"auto"或表达式 - 跨列数必须严格等于当前行其他单元格的列宽总和，否则表格结构会错乱
- 如果用了
<colgroup></colgroup>定义列宽，colspan仍按逻辑列数计算，不按像素宽度
想用 CSS 控制跨列标题样式？可以但有限制
colspan 本身不提供样式能力，但你可以给跨列的 <th> 加 CSS：
<pre class="brush:php;toolbar:false;"><th colspan="3" style="text-align: center; background: #f0f8ff; padding: 12px 0;">销售汇总（2024 Q1）</th></pre>
<p>注意这些实际限制：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5117" title="HTML Extract"><img
src="https://img.php.cn/upload/skill/000/000/081/179033952939354.jpg" alt="HTML Extract" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="overflowclass">HTML Extract</a>
<p class="overflowclass">使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...</p>
</div>
<a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>无法用 CSS 拆分或合并已渲染的单元格——<code>colspan 必须在 HTML 中声明
colspan 值，容易破坏语义和屏幕阅读器识别table-layout: fixed），跨列 <th> 的宽度由其所在列的合计宽度决定，而非内容撑开
<h3>替代方案：什么时候该放弃表格结构？</h3>
<p>当标题需要真正“悬浮”“跨多组列”或“与数据行错位对齐”时，表格语义已不适用。例如：</p>
<ul>
<li>带折叠分组的报表（如“华北”下含“北京”“天津”两列，“华南”下含“广州”“深圳”）</li>
<li>标题需横跨部分列且右侧留空（如前 2 列标题 + 后 1 列操作按钮）</li>
<li>需要响应式隐藏某些列但保留标题完整性</li>
</ul>
<p>这时更适合用 <code><div> + CSS Grid 或 Flex 布局模拟表格视觉，用 <code>role="table" 等 ARIA 属性保可访问性。硬套 <table> 反而会让 <code>colspan 逻辑变得脆弱难维护。
真正容易被忽略的是：表格的语义边界——它描述的是二维关系数据，不是任意排版容器。跨列标题一旦超出单层逻辑，就该重新评估结构是否还属于表格范畴。
