HTML 表格列组

HTML 表格列组

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

<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> 标签必须是 <table> 元素的子元素，并且应放置在任何其他表格元素（如 <thead>、<tr>、<td> 等）之前，但如果存在 <caption> 元素，则应放在其后。

合法的 CSS 属性

只有非常有限的 CSS 属性可以在 colgroup 中使用：

• width 属性
• visibility 属性
• background 属性
• border 属性

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

多个 Col 元素

如果您想为多列设置不同的样式，请在 <colgroup> 中使用多个 <col> 元素：

实例

<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>
...

亲自试一试

空列组

如果您想为表格中间的列设置样式，请为前面的列插入一个“空”的 <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>
...

亲自试一试