设置table单数行和双数行的样式

原创
2015/09/18 16:59
阅读数 118
<!DOCTYPE html>

<html>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Test</title>

<style type="text/css">

    #addtable tr{

  background:#FFC;

 }               

 #addtable tr:nth-child(2n){

    background:#CFF; 

 }

 #addtable tr{

    background-color: expression((this.sectionRowIndex % 2 == 0) ? "#FFC" : "#CFF" );

 }   

</style>

</head>

<body>

    <table id="addtable">

        <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>

        <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>

</body>

</html>

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部