col标签仅支持width（需table-layout:fixed）、background-color（firefox偶现）、border（仅列左右边缘）、visibility:collapse；其余如color、padding等全部无效；span仅作用于首列，列数须严丝合缝；colgroup必须为table直接子元素且位置正确。
col 标签能统一设哪些样式？别碰 color、padding 这些
col 标签只对极少数 CSS 属性生效，不是所有写在 td 上的都能平移过去。真正可靠的只有：width（需配合 table { table-layout: fixed }）、background-color（Firefox 偶尔渲染，Chrome/Safari 基本不画）、border（仅影响列左右边缘，非单元格内边框）、visibility: collapse（可靠隐藏整列）。其余如 color、font-size、padding、text-align、vertical-align 全部无效——不是你写错了，是规范限制。
span="3" 不等于三列都应用该样式
span 只表示“这个 col 覆盖接下来连续的 N 列”，但样式**只作用于第一个被覆盖的列**。比如：<col style="background-color: #f0f0f0" span="3"> 实际只有第 2 列（假设它是第二个 col）获得背景色，第 3、4 列不会继承。
- 想让三列同宽？必须写三个独立
<col width="120">，或用 CSS：td:nth-child(2), td:nth-child(3), td:nth-child(4) { width: 120px } - 列数必须严丝合缝：5 列表格，
col的span总和加单列数必须等于 5；少一个，最后一列无样式锚点；多一个，多余col完全无用 - 调试时直接看 Elements 面板：
colgroup节点是否出现在table下第一层；如果不是，立刻挪位置
colgroup 放错位置，样式就彻底失效
colgroup 必须是 table 的**直接子元素**，且顺序严格：<table>
<colgroup><col></colgroup>
<thead></thead>
</table> 是唯一正确结构。常见错误包括：
- 把
colgroup写在tbody里面，或套在tr里 —— 浏览器直接忽略 - 放在
caption前面，或thead后面 —— 失效 - 服务端模板渲染时，动态插入
colgroup却没校验父级节点层级，导致 DOM 结构错位
真正可靠的列样式控制组合策略
放弃把样式全堆在 col 上，转向分层控制：
- 用
col控制width和visibility: collapse（结构级操作，浏览器解析早期生效） - 用
th:nth-child(n)/td:nth-child(n)控制背景、文字对齐、边框等（渲染级操作，优先级更高，可覆盖col的部分效果） - 避免用
nth-of-type()——th和td是不同标签，序列会断掉 - 动态列数场景下，JS 生成对应数量的
col比硬写span更可控；或干脆全用nth-child()+ class 动态绑定
复杂点在于：col 是结构前置声明，不是样式钩子；它省不了多少代码，但能统一列宽和基础背景，精细控制还得靠单元格自身样式。容易被忽略的是——col 的样式会被 td 自身的 background-color 直接覆盖，调试时得先检查 computed 样式里谁赢了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
