用css实现表格行交替变

来源:互联网 发布:怎么关闭淘宝音乐 编辑:程序博客网 时间:2024/04/29 08:25

方法一:

<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>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</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>
原创粉丝点击