利用CSS3的伪类画表格
css3 伪类分为：动作伪类、目标伪类、语言伪类、结构伪类、UI元素状态伪类、否定伪类选择器。通过这些伪类选择器，可以实现很多原来需要js才能实现的功能。现在我们来用这些伪类选择器来制作表格。
表格1：
<!DOCTYPE html>
<html lang="en">
<head> <title>表格1</title>
<style>
div.demo{
width:600px;
margin:30px auto;
font-size:14px;
font-family: "微软雅黑";
color:#444;
}
table{
*border-collaspe:collaspe;
border-spacing: 0px;
width:100%;
}
/* 制作圆角表格*/
.bordered{
border:solid 1px #ccc;
border-radius:6px;
box-shadow: 0 1px 1px #ccc;
}
.bordered tr{
-o-transition:all 0.1s ease-in-out;
-webkit-transition:all 0.1s ease-in-out;
-moz-transition:all 0.1s ease-in-out;
-ms-transition:all 0.1s ease-in-out;
transition:all 0.1s ease-in-out;
}
.bordered th,.bordered td{
border-left: 1px solid #cccccc;
border-top:1px solid #cccccc;
padding:10px;
text-align:left;
}
.bordered td{
border-left-color:#fff;
}
.bordered tr:nth-child(n+3) td{
border-top:dashed 1px #ccc;
}
.bordered tr:nth-child(2n+3){
background-color:#ebf3fc;
}
.bordered .highlight,
.bordered tr:hover{
background:#fbf8e9;
}
.bordered th{
background-color:#dce9f9;
background-img:-webkit-gradient(linear,left top,left bottom,from(#ebf3fc),to(#dce9f9));
background-img:-webkit-linear-gradient(top,#ebf3fc,#dce9f9);
background-img:-moz-linear-gradient(top,#ebf3fc,#dce9f9);
background-img:-o-linear-gradient(top,#ebf3fc,#dce9f9);
background-img:-ms-linear-gradient(top,#ebf3fc,#dce9f9);
background-img:linear-gradient(top,#ebf3fc,#dce9f9);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorStr=#ebf3fc,endColorStr=#dce9f9);
-ms-filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorStr=#ebf3fc,endColorStr=#dce9f9);
box-shadow:0 1px rgba(255,255,255,.8) inset;/*表格表头设置内阴影*/
border-top:none;
text-shadow:0 1px rgba(255,255,255,.5);/*表格表头文字设置阴影*/
}
.bordered td:first-child,.bordered th:first-child{
border-left:none;
}
.bordered th:first-child{
border-radius:6px 0 0 0;
}
.bordered th:last-child{
border-radius:0 6px 0 0;
}
.bordered tr:last-child td:first-child{
border-radius:0 0 0 6px;
}
.bordered tr:last-child td:last-child{
border-radius:0 0 6px 0;
}
</style>
</head>
<body>
<div class="demo">
<table class="bordered">
<tr><th>#</th><th>姓名</th><th>年龄</th></tr>
<tr><td>1</td><td>Jack</td><td>21</td></tr>
<tr><td>2</td><td>Lucy</td><td>21</td></tr>
<tr><td>3</td><td>Rose</td><td>31</td></tr>
<tr><td>4</td><td>Bill</td><td>34</td></tr>
</table>
</div>
</body>
</html>
</pre><p></p><pre>效果如下：
表格2：
<!DOCTYPE html>
<html lang="en">
<head> <title>表格2</title>
<style>
div.demo{
width:600px;
margin:30px auto;
font-size:14px;
font-family: "微软雅黑";
color:#444;
}
table{
*border-collaspe:collaspe;
border-spacing: 0px;
width:100%;
}
.zebra td,
.zebra th{
padding:10px;
border-bottom:1px solid #f2f2f2;
}
.zebra tbody tr:nth-child(2n+3){
background: #f5f5f5;
box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
}
.zebra th{
text-align:left;
text-shadow:0 1px 0 rgba(255,255,255,.6);
border-bottm:1px solid #ccc;
background-color: #eee;
background-image:-webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#eee));
background-image:-webkit-linear-gradient(top,#f5f5f5,#eee);
background-image:-o-linear-gradient(top,#f5f5f5,#eee);
background-image:-ms-linear-gradient(top,#f5f5f5,#eee);
background-image:-moz-linear-gradient(top,#f5f5f5,#eee);
background-image:linear-gradient(top,#f5f5f5,#eee);
}
.zebra th:first-child{
border-radius:6px 0 0 0;
}
.zebra th:last-child{
border-radius:0 6px 0 0;
}
.zebra tr:last-child td:first-child{
border-radius:0 0 0 6px;
}
.zebra tr:last-child td:last-child{
border-radius:0 0 6px 0;
}
</style>
</head>
<body>
<div class="demo">
<table class="zebra">
<tr><th>#</th><th>姓名</th><th>年龄</th></tr>
<tr><td>1</td><td>Jack</td><td>21</td></tr>
<tr><td>2</td><td>Lucy</td><td>21</td></tr>
<tr><td>3</td><td>Rose</td><td>31</td></tr>
<tr><td>4</td><td>Bill</td><td>34</td></tr>
</table>
</div>
</body>
</html>
</pre><pre>效果图：
