col 的 span 属性不能批量控制列宽，仅定义当前 col 覆盖的列数而不广播样式；需配合 table-layout: fixed 和 width 设置才能生效，且所有 span 值之和必须等于实际列数。

col 的 span 属性不能批量控制列宽——它只负责“占位”，不广播样式。想让三列都宽 120px，写一个 <col span="3" style="width: 120px"> 是无效的。

span="N" 只影响当前 col 的作用范围，不复制样式

浏览器按顺序把每个 <col> 绑定到对应列：第 1 个 <col> → 第 1 列，第 2 个 → 第 2 列……span="3" 表示这个 <col> 覆盖第 1、2、3 列，但它的 style 只在第 1 列生效，后两列回退为默认行为（内容撑开或由后续 <col> 控制）。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 错误写法：<col span="3" style="width: 100px"> → 仅第 1 列宽 100px，第 2、3 列宽度失控
• 正确写法：<col style="width: 100px"> <col style="width: 100px"> <col style="width: 100px">
• 若真要“语义分组”，可用 <col span="3" id="price-cols">，再配合 CSS th:nth-child(1 of .price-cols) 或 JS 选中前 3 列统一设背景/边框，但宽度仍需逐个声明

想用 span 简化结构？只适用于“合并逻辑列组 + 百分比分配”

当表格有明确分组（如前 2 列是用户信息、后 3 列是订单信息），span 适合定义每组总宽占比，前提是搭配 table-layout: fixed 和明确的 <table width>： <ul> <li> <code><col span="2" style="width: 40%"> → 用户信息区共占表格宽 40%

<col span="3" style="width: 60%"> → 订单信息区共占 60%

此时第 1、2 列实际宽度由浏览器按比例均分（或由后续更细粒度的 <col> 覆盖），但组级宽度受控

漏掉 table { width: 100%; } 或 table-layout: fixed，百分比直接被忽略

动态生成表格时，span 容易引发列数错位

后台返回 5 列数据，你却写了 <col span="2"> + <col span="4">，结果总共声明了 6 列 —— 多出的 <col> 完全无用，但最后一列可能塌缩为 0 宽度（Safari 尤其敏感）。

• 必须确保所有 <col> 的 span 值之和等于实际列数
• JS 拼接时避免 colspan="${span}" 中 span 为 undefined 或非正整数，否则生成 span="undefined" 静默失效
• 调试技巧：运行 Array.from(document.querySelector('colgroup').children).reduce((s, el) => s + (parseInt(el.getAttribute('span')) || 1), 0)，核对是否等于 thead tr:first-child td 的列总数

最常被忽略的是：span 不是快捷键，它是列序锚点。写错一个值，整行列宽就偏移；没配 table-layout: fixed，再精确的 span 也白搭。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！