col 标签仅支持 width、background-color、border 和 visibility: collapse 等极少数 css 属性，且需 colgroup 作为 table 直接子元素；width 需配合 table-layout: fixed，visibility: collapse 可靠隐藏整列，其余如 color、padding 等无效。
colgroup 本身不能“统一修改列样式”，它只是语义容器；真正起作用的是它的子元素 col，且只对极少数 CSS 属性生效——别指望它像 CSS 类一样灵活控制颜色、字体或内边距。
col 标签支持哪些 CSS 属性？
浏览器只认有限几个属性，其余一律忽略（不是你写错了，是规范如此）：
-
width：最稳定，支持px、%、auto；必须配合table { table-layout: fixed }才能强制生效 -
background-color：Firefox 偶尔渲染，Chrome/Safari 基本不画；别依赖它设背景色 -
border：仅影响列左右边缘（非单元格内边框），兼容性差，不推荐 -
visibility: collapse：可靠隐藏整列，比display: none更规范 -
color、font-size、padding、text-align、vertical-align：全部无效——这些必须写在td或th上
colgroup 放错位置，样式就彻底失效
colgroup 必须是 table 的**直接子元素**，且顺序严格：
- ✅ 正确位置：
<table> <colgroup><col></colgroup> <thead>...</thead> </table> - ❌ 错误位置：
<table><tbody><colgroup>...</colgroup></tbody></table>或<table><tr><colgroup>...</colgroup></tr></table> - 调试时直接看 Elements 面板：
colgroup节点是否出现在table下第一层；如果不是，立刻挪
span="N" 不会让 N 列都继承样式
span 只表示“这个 col 覆盖接下来 N 列”，但样式只作用于**第一个被覆盖的列**：
-
<col width="120" span="3">≠ 三列都宽 120px；实际只有第 1 列应用该宽度，后两列回退到默认行为 - 想让三列同宽？必须写三个独立
<col width="120">，或用 CSS：td:nth-child(1), td:nth-child(2), td:nth-child(3) { width: 120px } - 列数必须严丝合缝：5 列表格，
col的span总和加单列数必须等于 5；少一个，最后一列无样式锚点；多一个，多余col完全无用
真正可靠的列样式控制方式
放弃把样式全堆在 col 上，转向组合策略：
- 用
col控制width和visibility: collapse（结构级操作） - 用
th:nth-child(n)/td:nth-child(n)控制背景、文字对齐、边框等（渲染级操作） - 避免
nth-of-type()——th和td是不同标签，序列会断掉 - 动态列数场景下，JS 生成对应数量的
col比硬写span更可控；或干脆全用nth-child()+ class 动态绑定
最易被忽略的点：列样式最终由 td/th 渲染，col 只是提前声明骨架；一旦单元格自身带 style 或 class，就会直接覆盖 col 的同名属性——这不是 bug，是层叠规则的正常表现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
