不知道各位用过Excel没有?在处理大量数据的时候,Excel隔行变色的设计是不是让你舒服很多?
现在网上有很多利用jQuery制作隔行变色表格的教程,但你认为为了小小的一个表格而加载50多k的js是否值得?即使贵站有大量表格,其实还不如用CSS方便。要知道这个效果到底有多方便,看下去就知道了。
首先写好表格内容,通常如下:
|
告诉你,这样的表格是只能用JavaScript或者jQuery做出隔行变色的效果。要用纯CSS打造隔行变色效果的话,我们要对表格做一点小改造。改成下面这种形式:
|
嗯,懂一点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; /* 隔行变色 */
}
有留意到那个边框重叠的属性吗?传说中的细线表格就是这么弄出来的。
好好消化一下,无论是隔行变色还是隔列变色,隔一行还是隔两行······相信什么样式的表格你都能做出来了。
本例效果最终如本文配图。