html5好看表格样式,CSS实现的清爽、漂亮的表格样式分享

效果：

实现代码：

复制代码代码如下:

CSS实现的清爽、漂亮的表格样式 - jb5t1.net

/* CSS Document */

body {

font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

color: #4f6b72;

background: #E6EAE9;

}

a {

color: #c75f3e;

}

#mytable {

width: 700px;

padding: 0;

margin: 0;

}

caption {

padding: 0 0 5px 0;

width: 700px;

font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

text-align: right;

}

th {

font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

color: #4f6b72;

border-right: 1px solid #C1DAD7;

border-bottom: 1px solid #C1DAD7;

border-top: 1px solid #C1DAD7;

letter-spacing: 2px;

text-transform: uppercase;

text-align: left;

padding: 6px 6px 6px 12px;

background: #CAE8EA url(images/bg_header.jpg) no-repeat;

}

th.nobg {

border-top: 0;

border-left: 0;

border-right: 1px solid #C1DAD7;

background: none;

}

td {

border-right: 1px solid #C1DAD7;

border-bottom: 1px solid #C1DAD7;

background: #fff;

font-size:11px;

padding: 6px 6px 6px 12px;

color: #4f6b72;

}

td.alt {

background: #F5FAFA;

color: #797268;

}

th.spec {

border-left: 1px solid #C1DAD7;

border-top: 0;

background: #fff url(images/bullet1.gif) no-repeat;

font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

}

th.specalt {

border-left: 1px solid #C1DAD7;

border-top: 0;

background: #f5fafa url(images/bullet2.gif) no-repeat;

font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

color: #797268;

}

/*---------for IE 5.x bug*/

html>body td{ font-size:11px;}

Configurations	Dual 1.8GHz	Dual 2GHz	Dual 2.5GHz
lipeng	M9454LL/A	M9455LL/A	M9457LL/A
mapabc	Dual 1.8GHz PowerPC G5	Dual 2GHz PowerPC G5	Dual 2.5GHz PowerPC G5
频率	900MHz per processor	1GHz per processor	1.25GHz per processor
2级缓存	512K per processor	512K per processor	512K per processor

获取更多JavaScript代码，请登录脚本之家 http://www.jb5t1.net

原文：http://www.jb51.net/css/163862.html