HTML 表格列组
The <colgroup> 元素用于设置表格特定列的样式。
HTML 表格列组
如果你想设置表格前两列的样式，使用 <colgroup> 和 <col> 元素。
| 周一 | 周二 | 周三 | 周四 | 周五 | 周六 | 周日 |
|---|---|---|---|---|---|---|
| 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 |
The <colgroup> 元素应该用作列规范的容器。
每个组都由 <col> 元素指定。
The span 属性指定获取样式的列数。
The style 属性指定要赋予列的样式。
注意: 列组的合法 CSS 属性 非常有限。
例子
<table>
<colgroup>
<col span="2" style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
...
试试看 »
注意: The <colgroup> 标签必须是 <table> 元素的子元素，并且应该放在任何其他表格元素（如 <thead>, <tr>, <td> 等）之前，但如果存在，则应该放在 <caption> 元素之后。
合法 CSS 属性
只有非常有限的 CSS 属性集可以用于列组
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>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
...
试试看 »
空列组
如果你想设置表格中间列的样式，请插入一个“空”的 <col> 元素（没有样式）用于之前的列
例子
<table>
<colgroup>
<col span="3">
<col span="2" style="background-color: pink">
</colgroup>
<tr>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
...
试试看 »
隐藏列
你可以使用 visibility: collapse 属性隐藏列
例子
<table>
<colgroup>
<col span="2">
<col span="3" style="visibility: collapse">
</colgroup>
<tr>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
...
试试看 »
