col标签仅支持width、background-color、border（左右）等有限样式，text-align在Chrome中有效但其他浏览器可能忽略，color等属性完全无效；必须严格按列数顺序匹配且置于caption后thead前，否则样式失效。
col 标签本身不渲染任何内容，也不能替代 td 或 th 创建列；它只是在表格解析早期向浏览器声明“第 N 列该有什么样式或尺寸”，真正起效的前提是结构顺序严格对齐、样式属性选对、且没被单元格自身样式覆盖。
col 标签能设哪些样式？哪些根本无效
不是所有写在 td 上的 CSS 都能搬到 col 上。浏览器只认有限几个属性，而且行为有差异：
-
width：✅ 有效，推荐用px或%，比如style="width: 120px"；用auto或fit-content可能被忽略 -
background-color：✅ 有效，但仅作用于列“背景区域”，若某td自己设了background-color，就会盖掉col的设置 -
border：✅ 仅影响列左右边缘（即整列的左/右 border），不是单元格内边框；border-top、border-bottom无效 -
text-align：⚠️ Chrome 支持，Safari 和部分旧 Edge 会忽略；别依赖它居中，老老实实写在th/td上 -
color、font-size、padding、margin、vertical-align：❌ 全部无效，写了也不起作用
col 数量不对或位置放错，样式就偏移
col 必须按顺序、一对一匹配表格实际列数，且只能放在 caption 之后、thead 之前。常见失效场景：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 表格有 5 列，但
colgroup里只写了 4 个col→ 第 5 列完全没样式继承 - 把
colgroup塞进tbody里，或者写在某个tr后面 → 浏览器直接忽略整个块 - 用了
span="3"，但后续实际列数不足 3 个 → 多余的span被截断，后面col的序号自动前移，样式全乱 - 表格带
colspan或rowspan的单元格 →col仍按“逻辑列数”计，不是渲染后可见列数；复杂合并表慎用col控制宽度
为什么加了 style 却没反应？优先级和覆盖逻辑
最常被忽略的不是语法错误，而是样式层叠规则：
立即学习“前端免费学习笔记（深入）”；
-
td或th上写的background-color会直接覆盖col的同名样式，哪怕col写在前面 - 用了已废弃的 HTML4 属性如
width="120"（字符串值）或align="right"→ HTML5 中完全不解析，控制台也无报错 - 用
!important强行提权也没用，因为col的样式本身就不参与常规 CSS 优先级计算，它走的是表格布局阶段的预设路径 - 把
colgroup用在非table场景（比如 Flex/Grid 容器里）→ 标签被忽略，连 DOM 都不进
真正关键的是：你得先确认表格列数是否稳定、col 是否按需写满、有没有单元格在暗地里覆盖样式——这些比调 CSS 更影响结果。
