col标签真正能生效的属性仅有width、background-color、border-left/right和visibility: collapse；其他如color、font-size等均无效。
col 标签本身不能定义“特定样式”，它只支持极有限的 CSS 属性，且行为受表格布局机制严格约束。想靠 col 控制 font-size、padding、color 或 text-align（尤其在 Safari 中）基本会失败——这些必须写在 th/td 上。
col 标签真正能生效的属性有哪些
col 的作用是为整列预设“布局锚点”，不是通用样式容器。浏览器只认以下几类声明：
-
width：✅ 唯一可靠控制列宽的方式，支持px、%、em；auto和fit-content大概率被忽略 -
background-color：✅ 仅渲染列背景区域，若某td自己设了同名样式，会直接覆盖 -
border-left/border-right：✅ 有效，但只画在列左右边缘；border-top、border-bottom❌ 无效 -
visibility: collapse：✅ 可隐藏整列（比display: none更符合表格语义） -
text-align：⚠️ Chrome 支持，Safari 和旧 Edge 通常忽略，别依赖 -
color、font-size、padding、margin、vertical-align：❌ 全部无效，写了等于没写
为什么写了 style 却没反应：三个最常踩的坑
不是代码写错，而是结构或逻辑被浏览器静默跳过：
-
colgroup没放对位置：必须是<table>的**直接子元素**，且在<caption>（如有）之后、<thead>之前；塞进<tbody>或<tr>里，整个块被忽略 - 列数不匹配：表格有 5 列，
colgroup里只写了 4 个col→ 第 5 列完全无样式继承；多写了也没用，多余col不起作用 - 用了已废弃的 HTML 属性：
<col width="120">在 HTML5 中被静默丢弃，控制台不报错也不生效；必须改用<col style="width: 120px">
table-layout: fixed 是精确控制的前提
不加 table-layout: fixed，col 的 width 只是“建议值”，浏览器仍会按内容撑开列宽。启用后：
- 列宽完全由
col或第一行th/td的宽度决定 - 某列
col没设width→ 该列可能塌缩为 0（Safari 尤其明显） - 百分比宽度按
<table>的实际宽度计算，所以<table>必须有明确宽度（如style="width: 100%"或style="width: 800px"） - 内容超长时仍可能撑开列 —— 这时要配合
white-space: nowrap和overflow: hidden写在td/th上，col本身不处理溢出
动态列数场景下 col 标签几乎不可用
如果表格列数由 JS 渲染或后端数据决定，colgroup 就很难维护：
-
span="3"不会让三列都获得相同宽度，它只让一个col“覆盖”三列逻辑位置，但样式只作用于起始列 - 想让每列等宽？必须显式写出对应数量的
col，不能偷懒用span广播 - 列数不确定时，更稳妥的做法是放弃
colgroup，改用td:nth-child(n)或th:nth-child(n)配合table-layout: fixed控制
真正难搞的不是怎么写 col，而是列数是否稳定、col 是否和实际列一一对应、有没有单元格在暗地里用内联样式覆盖——这些细节比调 CSS 更影响结果。
