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

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

目录

• • 1、colgroup和col
  • 2、colgroup和col标签的区别
  • 3、使用colgroup和col标签做固定表头

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控制列宽，使得表头列宽和内容部分列宽一致。
以上。