HTML 表格分组

这个<colgroup>元素用于设置表的特定列的样式。

HTML 表格分组

如果要设置表格前两列的样式，请使用<colgroup>和<col>元素。

MON	TUE	WED	THU	FRI	SAT	SUN
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28

这个<colgroup>元素应用作列规格的容器。

每个组都指定有一个<col>元素。

这个span属性指定有多少列获得该样式。

这个style属性指定列的样式。

笔记：选择非常有限colgroup 的合法 CSS 属性。

示例

<table>
<colgroup>
    <col span="2" style="background-color: #D6EEEE">
</colgroup>
<tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
...

亲自试一试 »

笔记：这个<colgroup>标签必须是 a 的子级<table>元素并应放置在任何其他表格元素之前，例如<thead>,<tr>,<td>等等，但是之后<caption>元素（如果存在）。

合法的 CSS 属性

仅允许在 colgroup 中使用的 CSS 属性非常有限：

width属性
visibility属性
background特性
border特性

所有其他 CSS 属性都不会影响您的表格。

多个列元素

如果您想为更多列设置不同的样式，请使用 more<col>里面的元素<colgroup>：

示例

<table>
<colgroup>
    <col span="2" style="background-color: #D6EEEE">
<col span="3" style="background-color: pink">
</colgroup>
<tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
...

亲自试一试 »

空 Colgroup

如果您想要为表格中间的列设置样式，请插入 "empty"<col>之前的列的元素（没有样式）：

示例

<table>
<colgroup>
    <col span="3">
    <col span="2" style="background-color: pink">
</colgroup>
<tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
...

亲自试一试 »

隐藏列

您可以使用隐藏列visibility: collapse属性：

示例

<table>
<colgroup>
    <col span="2">
    <col span="3" style="visibility: collapse">
</colgroup>
<tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
...

亲自试一试 »