col标签仅支持width和有限background样式，字体颜色等无效；样式需通过td/th或nth-child()实现，复杂表头须手动加class。
col 标签本身不支持直接设置字体、颜色等样式
col 标签在 HTML 中只定义列的结构语义，浏览器默认不会把它当作可渲染的元素——它没有内容、不占布局空间，color、font-size、background 这类 CSS 属性对它完全无效。你写 <col style="color: red">，页面上绝不会变红。
真正起作用的是 col 的两个有限样式能力：width（影响列宽）和 background（仅当整列单元格未显式覆盖时才可能透出）。其他样式必须落到 td 或 th 上。
用 colgroup + col 定义列范围再配合 CSS 选择器定位
要给“第3列”加边框或背景色，得靠 CSS 选择器匹配该列下的所有单元格。最可靠的方式是结合 colgroup 和 :nth-child()：
| A1 | B1 | C1 |
| A2 | B2 | C2 |
然后写 CSS：
-
.target-col只能控制width或background（且后者常被td覆盖） - 实际样式要写成：
td:nth-child(3), th:nth-child(3) { background: #f0f0f0; } - 如果表格有
thead/tbody，需明确作用域，比如：tbody td:nth-child(3)
col 标签的 width 设置在不同浏览器中表现不一致
col 的 width 属性（或 CSS width）在 Chrome/Firefox 中通常生效，但在 Safari 中可能被忽略，尤其当单元格内容撑开列宽时。更稳妥的做法是：
- 用
table { table-layout: fixed }强制按col宽度分配空间 - 配合
col { width: 120px }或col:nth-child(2) { width: 20% } - 但注意：一旦启用
table-layout: fixed，td内容超出会溢出或省略，需额外处理overflow和white-space
复杂表头或多层 rowspan/colspan 会让 nth-child 失效
如果表格有合并单元格（比如 colspan="2"），:nth-child(3) 就不再对应“视觉上的第3列”，而是 DOM 中的第3个子元素位置——这会导致样式错位。
此时唯一可靠方式是手动给目标列的每个 td/th 加 class：
<tr> <td>A1</td> <td>B1</td> <td class="price-col">$29.99</td> </tr>
然后用 .price-col { text-align: right; font-weight: bold; }。虽然不够自动化，但确定性最高。
别指望 col 承担太多样式责任——它本质是辅助布局和语义的，真要控制外观，还是得回到单元格本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
