仅能可靠设置width（需配合table-layout: fixed）、有限border及visibility: collapse，不支持color、font-size、background-color等样式；必须作为直接子元素置于后、前，否则被忽略。
<colgroup></colgroup> 标签本身不支持“分组”语义上的逻辑分组（比如按业务类型把几列归为一组并统一操作），它只是 HTML 中用于批量设置列宽、背景、边框等呈现样式的声明容器——而且这些样式只对视觉渲染有效，无法绑定事件、无法被 JavaScript 直接读取计算后的列宽，也不能替代 CSS 的 grid 或 table-column 等现代能力。
为什么 <colgroup></colgroup> 设置的样式经常不生效
常见原因是表格结构不匹配或 CSS 层叠覆盖：
-
<colgroup></colgroup>必须紧接在<table> 开始标签之后、<code><thead> 之前，顺序错乱（比如放在 <code><tbody> 里）会导致浏览器忽略整段 <li>每个 <code><col>对应一列，但若表格存在colspan或rowspan，列数计算会出错，导致样式错位 - CSS 中用
td, th { width: 100px }这类通配规则，会覆盖<col>的width声明（<col>的宽度仅作为“初始建议值”，最终由表格算法决定） -
<col>不支持background-color直接生效（需配合border-collapse: collapse和th, td的透明背景才能透出） -
width：仅当表格为table-layout: fixed时才强制生效；默认下仅作参考</li> <li><code>background-color
：需同时设置border-collapse: collapse+th, td { background: transparent } -
border：仅在border-collapse: collapse模式下，且必须是单一边框（如border-left），不能设四边 -
visibility: collapse：可隐藏整列（比display: none更安全，不破坏表格结构） - 给每列
<col>添加data-col-id属性，如<col data-col-id="price">，方便 JS 定位对应列的所有单元格：document.querySelectorAll('td[data-col-id="price"], th[data-col-id="price"]') - 用 CSS 类控制显隐，例如定义
.col-hidden { display: none }，然后通过 JS 切换<col>上的类，并同步切换所有该列td/th的类（<col>自身的visibility: collapse只影响渲染，不触发重排，但无法响应交互） - 避免在
<col>上写内联样式，改用 CSS 规则，例如：col[data-col-id="status"] { background: #f0f9ff; }，再配合border-collapse: collapse
<colgroup></colgroup> 能可靠设置哪些属性
只有少数几个 CSS 属性能通过 <col> 元素稳定影响列渲染：
其他如 font-size、color、text-align 完全无效——这些必须写在 th/td 或对应 CSS 选择器上。
用 <colgroup></colgroup> 实现“批量列控制”的实用技巧
真正想批量控制列行为（比如点击某列头筛选、动态显示/隐藏），不能只靠 <colgroup></colgroup>，得结合数据驱动和 CSS 类管理：
示例片段：
<table style="table-layout: fixed; border-collapse: collapse">
<colgroup>
<col data-col-id="id" width="80">
<col data-col-id="name" width="200">
<col data-col-id="status" width="120">
</colgroup>
<thead><tr><th>ID</th><th>Name</th><th>Status</th></tr></thead>
<tbody><tr><td>1</td><td>Alice</td><td>Active</td></tr></tbody>
</table>
真正麻烦的地方在于：你没法用 <colgroup></colgroup> 改变列的内容行为，也没法用它做响应式列宽适配。它只是一个有限、脆弱、但偶尔能省几行 CSS 的“列占位符”。需要动态逻辑时，老老实实操作 td/th 才是正解。
