纯CSS打造隔行变色表格

纯CSS打造隔行变色表格

45 Replies


不知道各位用过Excel没有？在处理大量数据的时候，Excel隔行变色的设计是不是让你舒服很多？

现在网上有很多利用jQuery制作隔行变色表格的教程，但你认为为了小小的一个表格而加载50多k的js是否值得？即使贵站有大量表格，其实还不如用CSS方便。要知道这个效果到底有多方便，看下去就知道了。

首先写好表格内容，通常如下：

<table class="datalist" summary="list of members in EE Studay"> <caption>Member List</caption> <tr> <th scope="col">Name</th> <th scope="col">Class</th> <th scope="col">Birthday</th> <th scope="col">Constellation</th> <th scope="col">Mobile</th> </tr> ............................................ <tr> <td>lightyear</td> <td>W311</td> <td>Mar 23th</td> <td>Aries</td> <td>1002908</td> </tr> </table>

告诉你，这样的表格是只能用JavaScript或者jQuery做出隔行变色的效果。要用纯CSS打造隔行变色效果的话，我们要对表格做一点小改造。改成下面这种形式：

<table class="datalist" summary="list of members in EE Studay"> <caption>Member List</caption> <tr> <th scope="col">Name</th> <th scope="col">Class</th> <th scope="col">Birthday</th> <th scope="col">Constellation</th> <th scope="col">Mobile</th> </tr> <tr> <!-- 奇数行 --> <td>isaac</td> <td>W13</td> <td>Jun 24th</td> <td>Cancer</td> <td>1118159</td> </tr> <tr class="altrow"> <!-- 偶数行 --> <td>girlwing</td> <td>W210</td> <td>Sep 16th</td> <td>Virgo</td> <td>1307994</td> </tr> ................................................. </table>

嗯，懂一点CSS和HTML的朋友应该知道下一步怎么做了。不懂的同学，可以听我解析一下，tr标签在HTML语言里代表表格的行，td标签代表列。接下来就开始写CSS，如下：

.datalist{

border:1px solid #0058a3; /* 表格边框 */

font-family:Arial;

border-collapse:collapse; /* 边框重叠 */

background-color:#eaf5ff; /* 表格背景色 */

font-size:14px;

}

.datalist caption{

padding-bottom:5px;

font:bold 1.4em;

text-align:left;

}

.datalist th{

border:1px solid #0058a3; /* 行名称边框 */

background-color:#4bacff; /* 行名称背景色 */

color:#FFFFFF; /* 行名称颜色 */

font-weight:bold;

padding-top:4px; padding-bottom:4px;

padding-left:12px; padding-right:12px;

text-align:center;

}

.datalist td{

border:1px solid #0058a3; /* 单元格边框 */

text-align:left;

padding-top:4px; padding-bottom:4px;

padding-left:10px; padding-right:10px;

}

.datalist tr.altrow{

background-color:#c7e5ff; /* 隔行变色 */

}

有留意到那个边框重叠的属性吗？传说中的细线表格就是这么弄出来的。

好好消化一下，无论是隔行变色还是隔列变色，隔一行还是隔两行······相信什么样式的表格你都能做出来了。

本例效果最终如本文配图。