colgroup仅能批量设置列宽、背景等渲染属性，无法实现语义列分组；样式不生效主因是位置错误、列数不匹配、用废弃属性、背景被覆盖或CSS属性不受支持；可靠属性仅有width（需table-layout:fixed）、background-color（需border-collapse:collapse且单元格无背景）、border-left/right（部分浏览器）及visibility:collapse。
colgroup 标签不能实现语义上的“列分组”，它只是批量声明列宽、背景、边框等渲染属性的结构容器——写再多 colgroup，也无法让 JS 读取“这三列属于价格模块”或响应点击事件。
为什么colgroup设置的样式经常不生效
不是代码写错了，而是浏览器压根不解析或不应用。最常见原因：
-
colgroup没放在<table> 直接子元素位置：必须在 <code><caption></caption>（如有）之后、<thead> 之前；塞进 <code><tbody> 或写在 <code><tr> 后面，整块被静默忽略 <li>列数对不上：<code>col的span总和 ≠ 表格实际列数（比如th有 5 个，但col只写了 4 个），最后一列就失去所有col声明的样式 - 用了已废弃的 HTML4 属性：
<col width="120">不起作用，必须用style="width: 120px"或 CSS 类 -
background-color被覆盖：只要任意一个td或th自己设了background-color，col的底色就透不出来，除非同时加border-collapse: collapse且单元格设background: transparent -
width：最可靠，但需配合table { table-layout: fixed }才强制生效；否则只是参考值，内容长了照样撑开 -
background-color：仅在border-collapse: collapse+ 所有对应td/th无背景时可见 -
border-left或border-right：部分浏览器支持（Chrome/Edge 较稳，Firefox 基本无效），border-top和border-bottom完全无效 -
visibility: collapse：可隐藏整列，且不破坏表格结构（比display: none更安全） - 给每个
col加data-col-id，例如<col data-col-id="amount"> - 用 JS 查找该列所有单元格：
document.querySelectorAll('td[data-col-id="amount"], th[data-col-id="amount"]') - 操作时同步切换
col和对应单元格的类，比如col.classList.toggle('hidden')+cells.forEach(c => c.classList.toggle('hidden')) - 避免用
span管理复杂列：动态列数下，span极易错位；宁可用 JS 生成精确数量的col元素
col 上哪些 CSS 属性真正可靠
别试，试了也白试。只有这几个能稳定起效：
以下全部无效：color、font-size、text-align（Chrome 偶尔继承，Safari/Firefox 多数忽略）、padding、vertical-align。
用colgroup配合 JS 实现“逻辑列分组”的真实做法
想按业务维度控制列（比如“金额列统一右对齐+加货币符号”），不能只靠 colgroup，得靠数据驱动 + 类名联动：
真正难的从来不是怎么写 colgroup，而是表格列数变化时，如何让 col 数量、顺序、data-col-id 和实际 th/td 严格对齐——差一个，整组逻辑就断掉。
