是唯一能批量控制表格列宽和背景色的原生方式，但对 color、font-size 等文本样式无效；其 width 优先级高且稳定，background-color 易被单元格覆盖；span 不匹配会静默失效；搭配 table-layout: fixed 时需显式设 width，否则列宽可能为 0。

<colgroup></colgroup> 是唯一能批量控制表格列级样式的原生 HTML 方式，但它不是万能的——很多样式写上去没反应，不是你代码错了，是浏览器根本不支持。

为什么 <col> 设置 color 或 font-size 无效

因为 <col> 只继承极少数 CSS 属性，color、font-size、text-decoration 这类文本属性完全被忽略。它只对 width、background-color、border（部分浏览器）、text-align（仅部分生效）等有限属性起作用。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• background-color 在大多数现代浏览器中可用，但会被 <td> 自身的背景色直接覆盖 <li> <code>width 生效稳定，且优先级高于 <td> 的 <code>width（前提是没设 table-layout: fixed）
• border 在 Firefox 中基本无效，在 Chrome/Edge 中仅对列左右边框有微弱表现
• 想让文字居中？别依赖 <col> 的 text-align，老老实实写在 <th> 和 <code><td> 上 <h3> <code>span 属性和列数量不匹配时的隐性 bug

  当 <col> 带 span="3"，但实际表格只有 2 列，浏览器不会报错，也不会警告——它会静默忽略这个 <col>，后续的列样式可能全部错位。

  • 务必确保所有 <col> 的 span 总和等于表格总列数
  • 用 JavaScript 校验： document.querySelectorAll('col').reduce((sum, c) => sum + (parseInt(c.span) || 1), 0) 应等于 document.querySelector('tr').cells.length
  • 如果表格动态生成（比如 Vue/React 渲染），<colgroup></colgroup> 必须同步更新，否则样式“漂移”

  和 table-layout: fixed 搭配使用时的宽度陷阱

  启用 table-layout: fixed 后，列宽完全由 <col> 或第一行 <th>/</th> <td> 决定，后续单元格内容再长也不会撑开列宽——这看似可控，实则埋雷。 <ul> <li>如果某列 <code><col> 没设 width，该列宽度会变成 0（尤其在 Safari 中）

• width: auto 在 <col> 上无效，只能用具体值（px、%、em）
• 百分比宽度按表格容器计算，不是按内容；若容器宽度未定（如 flex 子项），结果不可预测
• 响应式场景下，建议用 min-width + max-width 组合，而不是纯 width

真正关键的点是：<colgroup></colgroup> 不是样式捷径，而是结构声明。它只管“这一列该有多宽、底色是什么”，其余一切——字体、对齐、边框、悬停、响应式断点——都得回到 <th> 和 <code><td> 上去补全。</td>

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！