col 的 width 属性仅控制列宽，不能设置背景色；背景色必须通过 th/td 的 background-color 配合 :nth-child() 实现，因二者作用目标、层级和继承机制完全不同。
col 标签的 width 属性**不能设置背景色**，它只控制列宽；想统一设背景色，必须用 background-color，且得配合 :nth-child() 选中对应单元格。
为什么 col width 和背景色是两回事
width 是 col 唯一被广泛支持、行为稳定的属性；而 background-color 虽然能在部分浏览器中通过 col 设置（渲染列背景区域），但它和 width 没有逻辑绑定关系——写 width: 120px 不会自动让背景色生效，也不影响背景色是否显示。
-
col上写style="width:120px; background-color:#eee"：宽度一定生效，背景色在 Chrome/Edge 中可能显示（仅列空白区），但在 Safari 或有td自设背景时大概率被覆盖或不可见 -
col上只写width，不写背景：列宽可控，但整列背景完全由th/td决定，col不参与 - 想“靠
width带出背景色”是常见误解——二者 CSS 层级、作用目标、继承机制完全不同
col 的 background-color 为什么经常失效
不是代码写错，而是浏览器对 col 渲染背景的限制太严：
-
col本身不渲染内容，它的background-color只作用于“列的抽象背景区域”，一旦该区域被td或th的实际背景填充，就完全不可见 - 哪怕
td没设背景，Safari 对col background-color支持极弱，基本不渲染 -
col上写background: #f00（而非background-color）在某些版本 Chrome 中能勉强起效，但background-image、background-repeat等子属性全无效 - 表格用了
table-layout: fixed且某列col没设width→ 该列可能塌缩为 0 宽 → 背景区域消失 → 背景色自然不可见
真正可靠、兼容的列背景方案
放弃在 col 上硬刚背景色，直接用 CSS 伪类定位单元格：
- 给表格加 class，比如
<table class="schedule"> <li>用 <code>th:nth-child(6), td:nth-child(6)给第 6 列（如周六）设背景，th:nth-child(7), td:nth-child(7)设周日 - 如果列数动态变化，用
th:nth-last-child(-n+2), td:nth-last-child(-n+2)选最后两列 - 务必同时命中
th和td，否则表头或数据行背景会断层 - 避免用
tbody tr td:nth-child(n)—— 如果有colspan，nth-child仍按 HTML 结构顺序计数，只要td在源码中位置正确，就依然准确 - 写了 5 个
col，但表格实际有 6 列 → 第 6 列无任何col控制，width和background-color全失效 - 写了 6 个
col，但表格只有 5 列 → 最后一个col完全无作用，白写 - 用
col span="2"代替两个单独col？可以，但必须确保总 span 数 = 表格总列数，否则同样静默失效 -
col里别用 HTML4 的width="100"属性——HTML5 已废弃，浏览器不解析，必须改用style="width: 100px"
colgroup 位置和列数匹配的硬约束
colgroup 必须是 table 的**直接子元素**，且必须出现在 caption（如有）之后、thead 之前；否则整个 colgroup 块被浏览器静默忽略。
col 的 background-color 是个脆弱的备选，:nth-child() 才是稳态解。宽度靠 col，背景靠单元格选择器——混用反而增加调试成本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
