colgroup和col是唯一语义化批量控列宽的原生方式，但必须作为table直接子元素、严格匹配列数，并配合table-layout:fixed及显式表格宽度（如width:100%）才生效；width属性已废弃，须用style或class设置，span仅作用于首列。
colgroup 和 col 是唯一能语义化、批量控制列宽的原生方式，但必须配合 table-layout: fixed 和显式表格宽度才真正生效——单独写 <col width="120"> 或只设 table { width: 100% } 都会失效。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
colgroup 必须放对位置且数量严格匹配
浏览器不会报错，但放错位置或数量不对，col 就完全被忽略：
- colgroup 必须是 <table> 的**直接子元素**，且在 <code><caption></caption>（如有）之后、<thead> 之前<br>
- 表格有 5 列，你就得写 5 个 <code><col>，或用 <col span="5"> 显式覆盖全部
- 少一个 → 最后一列常塌缩为 0 宽度（Safari 尤其明显）
- 多一个 → 多余的 <col> 无任何效果
- 动态生成表格时，JS 插入 tr 后必须同步插入等量 col，不能“先渲染再补”
width 属性已废弃，必须用 CSS style
<col width="120"> 在所有现代浏览器中静默失效——这不是兼容性问题，是 HTML5 标准移除。
生效的只有：
- <col style="width: 120px">
- <col class="w-120"> + CSS 中定义 .w-120 { width: 120px; }
- 百分比写法：<col style="width: 25%">，但前提是 table 有明确宽度（如 style="width: 100%"）
- width: auto 在 col 中无效，会被当 0 处理
- span="3" 只表示该 col 占据三列逻辑位置，样式**只作用于第一列**，后两列不继承
table-layout: fixed 是硬性前提
没它，col 的宽度只是“参考值”，内容一长，列照样撑开：
- 必须同时满足三个条件：table { table-layout: fixed; } + table { width: 100%; }（或具体像素值）+ 每列都有 col 或首行 th/td 的 width
- 仅设 table-layout: fixed 而没给 table 设宽度 → 百分比失去参照，列宽不可控
- 仅设 table-layout: fixed 而没写任何 col 或首行 width → 浏览器 fallback 为均分，仍随内容波动
- 启用后，td 内容溢出需手动处理：white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
拖拽调整列宽时别改 col 的 width 属性
很多库在拖拽后直接修改 col 的 width 属性，结果没反应——因为 col 的 width 属性在 table-layout: fixed 下已被忽略。
真实生效的是 th 或 td 的 style.width：
- 拖拽开始时，读取当前 th.style.width 或 getComputedStyle(th).width
- 拖拽中，同步更新该列所有 td 和对应 th 的 style.width
- 拖拽结束，可选地把新宽度写回 col 的 width 属性（仅作状态快照或服务端回传用）
- 不要对 col 设置 style.width，它不响应 CSS 渲染
最易被忽略的点：你检查 DevTools 里 col 元素样式一切正常，但宽度就是不生效——大概率是 colgroup 放在了 thead 里面，或者表格没设 width。这两个问题不会报错，但会让整个列宽控制链路彻底失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
