colgroup 不能提升渲染性能，真正起效的是 table-layout: fixed 配合 css width 设置；其 width 属性已从 html5 标准移除，须改用 style 或 class 设置宽度，且 colgroup 必须为 table 直接子元素、列数须与实际表格列数严格一致。
colgroup 不能提高渲染效率，它对 FPS、首屏时间、重排开销基本没影响；真正起作用的是 table-layout: fixed 配合显式宽度设置。
colgroup 的 width 属性已彻底废弃
写 <col width="120"> 不会生效，现代浏览器静默忽略——这不是兼容性问题，是 HTML5 标准移除。必须改用 CSS width：
-
<col style="width: 120px">✅ 全浏览器支持 -
<col class="w-120">+.w-120 { width: 120px }✅ 推荐，利于复用和主题切换 -
width: auto在<col>上无效，会被当 0 处理
span="N" 只占位，不广播样式
<col span="3" style="width: 300px"> 实际只让第 1 列宽 300px，第 2、3 列回退为内容撑开或均分剩余空间——这不是 bug，是规范行为。
- 想三列都固定 100px？必须写三个
<col style="width: 100px"> - 想三列共占 300px 且等宽？用
<col span="3" style="width: 300px">+table-layout: fixed，但后两列宽度由浏览器按剩余空间分配（不可控） - 百分比值如
width: 30%必须配合<table style="width: 100%"> 才能计算，否则被丢弃 <h3>colgroup 必须是 table 的直接子元素，位置错就等于没写</h3> <p><code><colgroup></colgroup>必须紧接在<caption></caption>（如有）之后、<thead> 之前，且是 <code><table> 的**直接子元素**。 <ul> <li>✅ 正确：<code><table> <caption>...</caption> <colgroup>...</colgroup> <thead>...</thead> </table> - ❌ 错误：
<table><tbody><colgroup>...</colgroup></tbody></table>或<table><tr><colgroup>...</colgroup></tr></table> - 放错位置不会报错，DevTools 里也看不到任何效果——浏览器直接跳过解析
动态表格时，col 数量必须和实际列数严格对齐
表格有 5 列，<colgroup></colgroup> 就必须恰好覆盖 5 列（通过单个 <col> 或 span 总和），差一个，最后一列就失去控制。
- 少一个
<col>：Safari 中对应列可能渲染为 0 宽度，整列内容消失 - 多一个
<col>：多余项完全无用，还干扰调试 - Vue/React 渲染时，
<colgroup></colgroup>必须同步生成，不能靠 JS 后补——DOM 插入后补<col>不生效 - 校验建议：
document.querySelector('tr').cells.length === document.querySelectorAll('col').length
真正难搞的不是语法怎么写，而是列数变化时如何让 <col> 数量和实际 <th>/<code><td> 列数严丝合缝；差一个，样式就断在最后一列，且毫无提示。</td>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
