用css实现表格行交替变色
用css实现表格行交替变色
悬赏分：0 - 解决时间：2006-3-5 19:19
<style>
.db { border-collapse:collapse;}
.db tr{ background-color:expression('#dbdbdb,#EFEFEF'.split(',')[rowIndex%2]); }
</style>
<table width="100%" border="1" class="db">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
方法二：用th标签
<style by tesion.>
th {font-weight: normal; text-align:left; background: #CCCCCC}
td {background: #FAFAFA}
</style>
<table>
<tr>
<th>第一个颜色</th>
</tr>
<tr>
<td>第二个颜色</td>
</tr>
<tr>
<th>第一个颜色</th>
</tr>
<tr>
<td>第二个颜色</td>
</tr>
<tr>
<th>第一个颜色</th>
</tr>
<tr>
<td>第二个颜色</td>
</tr>
</table>
<p>灵巧地使用table的标签是最高效率的办法</p>
方法三：高级变色
<style type="text/css">
<!--
tr {background-color:expression((this.sectionRowIndex%2==0)?"red":"blue")}
td {background-color:expression((this.cellIndex%2==0)?"":((this.parentElement.sectionRowIndex%2==0)?"green":"yellow"))}
-->
</style>
</HEAD>
<table>
<tr><td>第1行</td><td>第1行</td><td>第1行</td><td>第1行</td><td>第1行</td></tr>
<tr><td>第2行</td><td>第2行</td><td>第2行</td><td>第2行</td><td>第2行</td></tr>
<tr><td>第3行</td><td>第3行</td><td>第3行</td><td>第3行</td><td>第3行</td></tr>
<tr><td>第4行</td><td>第4行</td><td>第4行</td><td>第4行</td><td>第4行</td></tr>
<tr><td>第5行</td><td>第5行</td><td>第5行</td><td>第5行</td><td>第5行</td></tr>
</table>
方法四：动态表格交替颜色的效果
<style type="text/css">
<!--
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, Helvetica, sans-serif;
}
#navcontainer li { margin: 0 0 1px 0; }
#navcontainer a
{
display: block;
padding: 5px 10px;
width: 140px;
color: #fff;
background-color: #036;
text-decoration: none;
}
#navcontainer a:hover
{
color: #fff;
background-color: #69C;
text-decoration: none;
}
-->
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li><a href="#">主标题一</a></li>
<li><a href="#">主标题二</a></li>
<li><a href="#">主标题三</a></li>
<li><a href="#">主标题四</a></li>
</ul>
</div>
