### [用 colgroup 的 span 一次给整列上样式](https://www.huociguo.com/article/1843)

**Published:** 2026-10-03T02:35:19

**Author:** 米了

**Excerpt:** 🎯 前阵子接手一张销售报表，左边两列要灰底，右边三列白底。第一反应是给每个 写 class，表格有四十多行，写…

🎯 前阵子接手一张销售报表，左边两列要灰底，右边三列白底。第一反应是给每个 `td` 写 class，表格有四十多行，写到手抖。后来翻规范才想起 `colgroup` 这套按列设样式的方式。

`colgroup` 放在 `table` 开头，里面用 `col` 描述每一列。想一次管多列，就靠 `span` 属性：`span="2"` 表示这条规则覆盖连续两列。

![表格列分组示意](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-7735708.jpeg)

报表按列分组，底色一眼区分

写法长这样：

```
<table>
  <colgroup>
    <col class="left">
    <col span="2" class="right">
  </colgroup>
  <thead>...</thead>
  <tbody>...</tbody>
</table>
```

⚠️ 坑在属性支持范围。`col` 只能接收部分样式：背景色、宽度、边框、可见性这几类生效。想设字号、内边距、文字颜色，写在 `col` 上不会起作用，浏览器直接忽略。需要完整控制时，改用 `td:nth-child(n)` 选择器。

其余场景，列级底色和列宽用 `colgroup` 最省代码。报表类页面基本靠它收尾。

**Tags:** colgroup, colgroup span属性, HTML表格结构, table列宽控制, 表格列分组

**Categories:** HTML5

---