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

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

你可能感兴趣的:(设置table单数行和双数行的样式)