关于colgroup和col标签的介绍，使用其达到固定表头的效果

今天摸鱼的时候看阮神的博客，里面介绍了position的用法，最后一部分介绍了一个新的定位属性sticky，其中有一个固定表头的案例，我发现案例里面的固定表头只能用于那种占据整个页面的那种大表，但是我们常用的表格通常是只在一部分区域使用，于是查了一下固定表头的实现，在其中一种实现方法中发现了colgroup和col标签，回想起element-ui的表格组件也用了这两个标签，属实好奇，百度后决定记录一下。

1、colgroup和col

通常我们对table标签里面的某一列设置宽度时，都是使用伪类选择器nth-child对对应列的td的宽度进行设置。这样写起来未免麻烦，而且在代码量比较大的情况下，要找到这个样式进行修改也不是那么容易，而且语义不够明确。这时我们就可以用一个替代品来解决这个问题，没错，就是她俩：colgroup和col。

这两个标签使用起来非常简单，就是用来控制table的列的样式，col即column（列）的开头三个字母，group有集体的意思，于是我们可以很自然的猜想col需要放在colgroup的里面。我们首先看个案例：

<table>
	<colgroup style="width: 100px;background-color: red;"></colgroup>
	<colgroup style="width: 200px;background-color: green;"></colgroup>
	<tr>
		<td>王小波</td>
		<td>李银河</td>
	</tr>
	<tr>
		<td>钱钟书</td>
		<td>杨绛</td>
	</tr>
	<tr>
		<td>梁思成</td>
		<td>林徽因</td>
	</tr>
</table>

效果如下：

可见第一列的宽度都被设置成了100px，背景色为红色，第二列的宽度为200px，背景色为绿色。上面的代码还可以这么写：

<table>
	<colgroup>
		<col style="width: 100px;background-color: red;" >
		<col style="width: 200px;background-color: green;" >
	</colgroup>
	<tr>
		<td>王小波</td>
		<td>李银河</td>
	</tr>
	<tr>
		<td>钱钟书</td>
		<td>杨绛</td>
	</tr>
	<tr>
		<td>梁思成</td>
		<td>林徽因</td>
	</tr>
</table>

可以得到相同的效果。colgroup和col均有5个属性，但是只有span属性被html5支持，其余都被废弃了。span的作用是跨列，即将样式赋予从当前列到跨越的所有列。如下：

<table>
	<colgroup>
		<col style="width: 100px;background-color: red;" span="2" >
	</colgroup>
	<tr>
		<td>王小波</td>
		<td>李银河</td>
	</tr>
	<tr>
		<td>钱钟书</td>
		<td>杨绛</td>
	</tr>
	<tr>
		<td>梁思成</td>
		<td>林徽因</td>
	</tr>
</table>

效果如下：

colgroup的用法相同，效果也一样。

注：colgroup标签必须在table中使用且必须位于 caption 元素之后，thead、tbody、tfoot、tr 元素之前。col标签通常用于colgroup中使用，且在 HTML 中，<col> 标签没有结束标签。在XHTML中，<col> 标签必须被正确的关闭。

2、colgroup和col标签的区别

目前尚未找到两者的区别，但是个人认为，如果要给表格设置公共样式，例如固定列宽，可以使用colgroup，如果表格每一列的样式不一致，则可以使用col，因为col的样式会覆盖colgroup的样式。个人更推荐使用col，因为利于后期维护。且语义更明确。

3、使用colgroup和col标签做固定表头

下面是转载的文飞的代码。

html部分

<div style="width: 800px;">
        <div class="table-head">
            <table>
                <colgroup>
                    <col style="width: 80px;" />
                    <col />
                </colgroup>
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>内容</th>
                    </tr>
                </thead>
            </table>
        </div>
        <div class="table-body">
            <table>
                <colgroup>
                    <col style="width: 80px;" />
                    <col />
                </colgroup>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>我只是用来测试的</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>我只是用来测试的</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>我只是用来测试的</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>我只是用来测试的</td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>我只是用来测试的</td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>我只是用来测试的</td>
                    </tr>
                    <tr>
                        <td>7</td>
                        <td>我只是用来测试的</td>
                    </tr>
                    <tr>
                        <td>8</td>
                        <td>我只是用来测试的</td>
                    </tr>
                    <tr>
                        <td>9</td>
                        <td>我只是用来测试的</td>
                    </tr>
                    <tr>
                        <td>10</td>
                        <td>我只是用来测试的</td>
                    </tr>
                    <tr>
                        <td>11</td>
                        <td>我只是用来测试的</td>
                    </tr>
                    <tr>
                        <td>12</td>
                        <td>我只是用来测试的</td>
                    </tr>
                    <tr>
                        <td>13</td>
                        <td>我只是用来测试的</td>
                    </tr>
                    <tr>
                        <td>14</td>
                        <td>我只是用来测试的</td>
                    </tr>
                    <tr>
                        <td>15</td>
                        <td>我只是用来测试的</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

css部分

.table-head {
        padding-right: 17px;
        background-color: #999;
        color: #000;
    }

    .table-body {
        width: 100%;
        height: 300px;
        overflow-y: scroll;
    }

    .table-head table,
    .table-body table {
        width: 100%;
    }

    .table-body table tr:nth-child(2n+1) {
        background-color: #f2f2f2;
    }

这里主要是通过colgroup和col控制列宽，使得表头列宽和内容部分列宽一致。
以上。