利用CSS3提供的伪类选择器，特别是子元素选择器nth-child，作出斑马条纹的表格再也不是难事了，而且利用nth-child(αn+β)这样的表达式可以实现分组的效果，棒呆！

查看效果

下载地址

链接: https://pan.baidu.com/s/1i4BcHLj 密码: vehy

一、案例知识点

• nth-child伪类选择器的多种使用

• border-radius在表格上的运用

• box-shadow内阴影的设置
  

二、主要代码

1、CSS部分代码

.bordered th,.bordered td{
	border-right:1px solid #333;
	border-bottom:1px solid #333;
}
.bordered  th{
	box-shadow:0 1px 0 rgba(255,255,255,.8) inset;/*内阴影*/
	}
.bordered th:last-child,.bordered td:last-child{
	border-right:none;
	}
.bordered tr:last-child td{
	border-bottom:none;}
th:first-child{
	border-radius:10px 0 0 0;}
th:last-child{
	border-radius:0 10px 0 0;}
tr:last-child td:first-child{
	border-radius:0 0 0 10px;}
tr:last-child td:last-child{
	border-radius:0 0 10px 0;}
tr:nth-child(4n+1) td{/*4n+1,表示4个位一组，以第一个开头*/
	background-color:#93e8d7;
	}
tr:nth-child(4n+2) td{
	background-color:#73dfd4;
	}
tr:nth-child(4n+3) td{
	background-color:#3ed0ce;}
tr:nth-child(4n+4) td{
	background-color:#15c4c9;}
tr:first-child th{/*第一行*/
	background-color:#00aba9;
	color:#000;
	}
tr:hover td{
	background-color:#f6f793;
	color:#000;
	cursor:pointer;}