跳到主要内容

表格列组

表格多列可以组合在一起。

组多列​

使用<colgroup>和<col>标签可以组合多列。


<table>
    <colgroup>
        <col style="background-color: red"/>
        <col span="2" style="background-color: green"/>
    </colgroup>
    <tr>
        <th></th>
        <th>语文</th>
        <th>数学</th>
        <th>物理</th>
        <th>化学</th>
    </tr>
    <tr>
        <td>郝来吴</td>
        <td>90</td>
        <td>100</td>
        <td>98</td>
        <td>100</td>
    </tr>
    <tr>
        <td>刘美溪</td>
        <td>94</td>
        <td>98</td>
        <td>100</td>
        <td>89</td>
    </tr>
</table>
about:blank

空列组​

想要在表格中间插入列组，只需在前面插入空的列组即可

<colgroup>
    <col span="2"/>
    <col span="2" style="background-color:red;"/>
</colgroup>
about:blank

隐藏列组​

想要隐藏某些列，只需设置 col标签的CSS visibility 属性为 collapse 即可。

<colgroup>
    <col span="2"/>
    <col span="3" style="visibility: collapse"/>
  </colgroup>
about:blank
提示

<colgroup> 必须在 table 标签内，并且在 <caption> 元素之后， 以及<thead>、<th>、<tbody>、<tfoot> 和 <tr> 等元素之前。

HTML 参考​

名称描述

CSS 参考​

名称描述