HTML属性Span：表格列分组属性Colgroup的深度布局应用-html教程-PHP中文网

span总和必须等于实际列数，否则列样式失效；浏览器仅支持col元素的有限样式，且col需正确解析并对应物理列，动态渲染时须确保执行时机准确。

html属性span：表格列分组属性colgroup的深度布局应用

span 不是万能列索引器，它只管“从当前位置往右数几列”，数错就全偏——表格列样式失效时，90% 是 span 总和 ≠ 实际列数。

为什么`span`加了但背景色/宽度没反应

浏览器对 <col> 的样式支持极窄，span 本身不控制渲染，只是分配列归属。真正起效的前提是：<col> 必须被正确解析且对应到物理列上。

span 值总和小于总列数 → 后续列无 <col> 管理，回退为内容自适应宽度，background-color 完全丢失
span 值总和大于总列数 → 多余的 <col> 被静默丢弃，不影响已覆盖列，但无法补救漏控
写了 <th colspan="2"> 或 <code><td rowspan="3"> → <code>span 仍按原始列数（非视觉列）计数，容易误判“第几列”
把 <colgroup></colgroup> 塞进 <tbody> 或写在 <code><tr> 后面 → 浏览器跳过整个节点，DevTools 里都看不到它 <h3>怎么验证<code>span是否配得准
别靠肉眼数，用 JS 一行校验最可靠：

html-deploy
使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载
```
const totalSpan = [...document.querySelectorAll('col')].reduce((sum, col) => sum + (parseInt(col.span) || 1), 0);
const actualCols = document.querySelector('tr')?.cells.length || 0;
console.log(`span 总和: ${totalSpan}, 实际列数: ${actualCols}`, totalSpan === actualCols ? '✅ 匹配' : '❌ 错位');
```
- 动态渲染表格（如 React/Vue）时，必须确保 JS 执行时机在 <tr> 渲染完成之后 <li>若表格含多行表头（<code><thead> 多个 <code><tr>），以第一行 <code><tr> 的 <code>cells.length 为准
- 服务端渲染（SSR）中，若 <colgroup></colgroup> 和 <tr> 分属不同 chunk，也容易导致初始不匹配 <h3> <code>span 配合 table-layout: fixed 的硬约束
  启用 table-layout: fixed 后，<col> 的 width 变成唯一权威来源，span 错一位，整列就塌缩为 0 宽（Safari 尤其明显）。
  - 每一列都必须有对应 <col>，不能漏；哪怕只是占位，也要写 <col>
  - width: auto 在 <col> 上无效，必须用具体值：width: 120px、width: 20%（注意：百分比基于容器宽度，不是表格自身）
  - 响应式场景下，纯 width 易溢出，推荐组合：min-width: 100px; max-width: 200px; width: 150px;
  - 不要混用 HTML width 属性（如 <col width="100">），HTML5 已废弃，现代浏览器忽略
  真正难的不是写对 span，而是当表格结构随数据变化（比如某列条件隐藏）、或接入第三方组件（如 antd Table）时，<colgroup></colgroup> 很容易变成“静态快照”，和实际 DOM 列数脱节。这种错位不会报错，只会让列宽突然归零、背景色莫名消失——问题藏得深，修复却只差一个数字。