HTML5中col元素的width属性已废弃，必须用CSS width（px/%/em等）配合table-layout: fixed和table明确宽度才能生效；colgroup须为table直接子元素，span仅占位不广播，列数需严格对齐。
colgroup 的 width 属性早就失效了
写 <col width="120"> 不会生效，HTML5 已废弃该属性，浏览器静默忽略。必须用 CSS 的 width 值，且只能通过 style 或 class 设置：
-
<col style="width: 120px">✅ 现代浏览器全支持 -
<col class="w-120">+.w-120 { width: 120px }✅ 推荐，利于复用和维护
别再查老教程里带 width 属性的写法——它现在就是个摆设。
span="3" 不会让三列都变宽，只影响第一列
span 的作用是“占位”，不是“广播”。<col style="width: 100px" span="3"> 实际只让第 1 列宽 100px，第 2、3 列回退为默认宽度（内容撑开或浏览器自动分配）。
- 想让前三列都固定 100px：必须显式写三个
<col style="width: 100px"> - 想让前三列共占 300px：用
<col span="3" style="width: 300px">，但需配合table-layout: fixed才稳定 - 动态列数时，
span极易错位——少一个<col>，最后一列就失去控制；多一个，多余项完全无用
table-layout: fixed 是列宽可控的前提
默认 table-layout: auto 下，<col> 的 width 只是参考值，内容长了照样撑开。真要锁定列宽，必须加：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
<table style="table-layout: fixed; width: 100%">
<colgroup>
<col style="width: 120px">
<col style="width: 20%">
</colgroup>
...
</table>
-
table必须有明确宽度（100%或具体像素），否则百分比width无效 - 启用
table-layout: fixed后，某列漏写<col>→ 该列宽度可能为 0（Safari 尤其明显） -
width: auto在<col>上无效，只能用px、%、em等具体值
colgroup 放错位置，样式就彻底消失
<colgroup> 必须是 <table> 的**直接子元素**，且顺序严格：
- ✅ 正确：
<table><caption>...</caption><colgroup>...</colgroup><thead>...</thead></table></li> <li>❌ 错误：<code><table><tbody><colgroup>...</colgroup></tbody></table>
或<table><tr><colgroup>...</colgroup></tr></table>
放错位置不会报错，DevTools 里也看不到效果——浏览器直接跳过解析。调试时先检查 Elements 面板中 <colgroup> 是否出现在 <table> 下第一层。
真正难搞的不是语法怎么写，而是列数变化时如何让 <col> 数量和实际 <th>/<td> 列数严格对齐；差一个，样式就断在最后一列。
