<!DOCTYPE html>
<html>
<head>
<meta charset="GBK" />
<title>Css3实现表格隔行变色或隔列变色</title>
<style>
.tableStyle {
border-collapse:collapse;
border-spacing:0;
}
.tableStyle tr {
background-color: expression((this.rowIndex % 2 == 0) ? "#F4F4F4" : "#FFF" );
}
.tableStyle tr:hover {
background:#73B1E0;
color:#FFF;
}
.tableStyle td {
border:1px solid #EEE;
}
.tableStyle th {
border:1px solid #EEE;
background:#0090D7;font-weight:normal;line-height:30px;font-size:14px;color:#FFF;
}
</style>
</head>
<body>
<table class="tableStyle">
<tr>
<th>xHTML+CSS</th>
<th>HTML5+CSS3</th>
<th>Javascript</th>
<th>jQurey</th>
</tr>
<tr>
<td>xHTML+CSS</td>
<td>HTML5+CSS3</td>
<td>Javascript</td>
<td>jQurey</td>
</tr>
<tr>
<td>xHTML+CSS</td>
<td>HTML5+CSS3</td>
<td>Javascript</td>
<td>jQurey</td>
</tr>
<tr>
<td>xHTML+CSS</td>
<td>HTML5+CSS3</td>
<td>Javascript</td>
<td>jQurey</td>
</tr>
<tr>
<td>xHTML+CSS</td>
<td>HTML5+CSS3</td>
<td>Javascript</td>
<td>jQurey</td>
</tr>
<tr>
<td>xHTML+CSS</td>
<td>HTML5+CSS3</td>
<td>Javascript</td>
<td>jQurey</td>
</tr>
<tr>
<td>xHTML+CSS</td>
<td>HTML5+CSS3</td>
<td>Javascript</td>
<td>jQurey</td>
</tr>
</table>
</body>
</html>
table隔行变色的css
最新推荐文章于 2024-07-12 18:29:20 发布