是唯一原生批量控制表格列宽和背景色的机制，但不支持 color、font-size 等文本样式； 仅对 width、background-color、border-left/right 等少数属性有效，且需确保 span 总和等于总列数，搭配 table-layout: fixed 时 width 必须显式设置。

<colgroup></colgroup> 是唯一能原生批量控制表格列宽和列背景色的 HTML 机制，但它不处理字体、颜色、对齐等文本样式——不是你写错了，是浏览器压根不支持。

为什么<col>设color或font-size完全没反应

<col> 只继承极少数 CSS 属性，color、font-size、text-decoration、line-height 全部被忽略。它只对以下属性有实际效果：

• width：稳定生效，优先级高于 <td> 的 width（除非启用了 <code>table-layout: fixed）
• background-color：多数浏览器支持，但会被 <td> 自身的 background 直接覆盖<li> <code>border-left/border-right：Chrome/Edge 中可能微弱显示，Firefox 基本无效
• text-align：部分浏览器部分生效，不可依赖；居中/右对齐请老老实实写在 <th> 和 <code><td> 上<h3> <code>span 不匹配时为什么没报错却样式全乱了

  <col> 的 span 属性一旦与实际列数不一致，浏览器会静默忽略该 <col>，后续所有列样式都会偏移。比如表格共 5 列，但写了：

  

  Article To Html

  文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

  下载

  <colgroup>
  <col span="3">
  <col span="3">
  <!-- 实际只剩 2 列，这个 <col> 被丢弃 -->
  </colgroup>

  结果是第 4、5 列得不到任何 <col> 控制，宽度回退到自动计算，背景色丢失。务必保证：

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

  搭配table-layout: fixed时width必须显式设置

  启用 table-layout: fixed 后，列宽不再由内容撑开，而是完全依赖 <col> 或第一行单元格的 width。常见陷阱：

  • 某列 <col> 没设 width → 该列宽度为 0（Safari 尤其明显）
  • width: auto 在 <col> 上无效，只能用具体值：px、%、em
  • 百分比宽度按表格容器（如外层 <div>）计算，不是按 <code><table> 自身宽度<li>响应式场景下，建议用 <code>min-width + max-width 组合，避免纯 width 在窄屏下溢出

  真正关键的是：<colgroup></colgroup> 是结构声明，不是样式补丁。它只管“这一列多宽、底色什么”，其余一切——字体、悬停、断点切换、暗色模式适配——都得回到 <th> 和 <code><td> 上去补全。</td>