HTML5中利用Colgroup与Col标签批量控制表格列样式

<colgroup>和<col>是HTML5中用于批量控制表格列样式的语义化标签，不渲染内容但可统一设置宽度、背景色、边框及隐藏整列；<colgroup>须为<table>直接子元素且不可嵌套，<col>需闭合并按顺序对应列，支持width、background-color、visibility: collapse等有限CSS属性，推荐结合class使用以提升复用性。

在HTML5中，<colgroup> 和 <col> 是专门用于**批量控制表格列样式**的语义化标签，它们不渲染可见内容，但能高效统一设置整列的宽度、背景、边框等CSS属性，避免为每单元格重复写样式。

Colgroup是列组容器，Col定义具体列

<colgroup> 必须作为 <table> 的直接子元素（通常放在 <thead> 之前），它本身不显示，只起分组作用；<col> 是它的子元素，每个 <col> 对应表格中的一列（按顺序一一对应）。
例如：

<table>
  <colgroup>
    <col span="2"> <!-- 控制前两列 -->
    <col> <!-- 控制第3列 -->
  </colgroup>
  <thead>…</thead>
  <tbody>…</tbody>
</table>

这里 span="2" 表示该 <col> 覆盖两列，总共控制3列。注意：列数必须与实际表格列数一致，否则样式可能错位。

立即学习“前端免费学习笔记（深入）”；

支持的CSS属性有限但实用

浏览器仅允许对 <col> 应用部分CSS属性，常用且兼容性好的包括：
• width（最常用，可设像素、百分比或 auto）
• background-color（整列背景色）
• border（仅部分浏览器支持列边框，推荐用 border-collapse: collapse 配合单元格边框更可靠）
• visibility: collapse（隐藏整列，比 display:none 更规范）
不支持 color、font-size、padding 等文本或内边距相关属性——这些需作用于 <td>/<th> 或其父元素。

配合CSS类实现灵活控制

直接在 <col> 上写内联样式不便于复用，推荐结合 class 使用：
<colgroup>
  <col class="price-col">
  <col class="status-col">
</colgroup>
再在CSS中定义：
.price-col { width: 120px; background: #f9f9f9; }
.status-col { width: 80px; text-align: center; }
注意：text-align 虽不能直接生效于 <col>，但某些浏览器会继承影响单元格对齐，稳妥做法仍建议在 td, th 上统一设置。

常见误区与注意事项

• <col> 标签**必须闭合**（HTML5中不可省略结束标签）
• <colgroup> 不可嵌套，也不可出现在 <tbody> 内部
• 若表格含 <colgroup>，所有列都应被覆盖，否则未覆盖列可能样式异常
• 响应式场景下，width 设为百分比更灵活，但需确保父容器有明确宽度
• Safari 对 visibility: collapse 支持较好，Chrome/Firefox 也已稳定支持