css 使用CSS3的交替颜色的表列

Posted 2021-05-13

<table class="tableCol">
	<tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td></tr>
	<tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td></tr>
	<tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td></tr>
	<tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td></tr>
</table>

.tableCol{
	width:100%; 
	border-collapse:collapse; 
}
.tableCol td{ 
	padding:7px; border:#4e95f4 1px solid;
}
/* improve visual readability for IE8 and below */
.tableCol tr{
	background: #b8d1f3;
}
/*  Define the background color for all the ODD table columns  */
.tableCol tr td:nth-child(odd){ 
	background: #b8d1f3;
}
/*  Define the background color for all the EVEN table columns  */
.tableCol tr td:nth-child(even){
	background: #dae5f4;
}