在CSS或JavaScript中为表格的行和列设置替代颜色

Question

I have also tried using below codes. it doesn't work for this case.

table>tbody>tr>td:nth-child(odd){
    background-color: #F2F2F2;
}
table>tbody>tr:nth-child(odd){
    background-color: #FFF !important;
}
table>tbody>tr>td:nth-child(even){
    background-color: #F7F7F7;
}

Answer 1

Alternating rows

See the difference: we are using odd and even on tr , not td :

 table>tbody>tr:nth-child(odd) >td{ background-color: #eee; } table>tbody>tr:nth-child(even)>td{ background-color: #ccc; } 

 <table> <tbody> <tr><td>. . . . .</td><td>. . . . .</td><td>. . . . .</td></tr> <tr><td>. . . . .</td><td>. . . . .</td><td>. . . . .</td></tr> <tr><td>. . . . .</td><td>. . . . .</td><td>. . . . .</td></tr> <tr><td>. . . . .</td><td>. . . . .</td><td>. . . . .</td></tr> <tr><td>. . . . .</td><td>. . . . .</td><td>. . . . .</td></tr> </tbody> </table> 

It seems this first part was answered here:
Alternate table row color using CSS?

Alternating rows and columns:

If you want the "doubled" alternate, extend the concept to all combinations:

 table>tbody>tr:nth-child(odd)> td:nth-child(odd) {background-color:#aaa} table>tbody>tr:nth-child(odd)> td:nth-child(even){background-color:#888} table>tbody>tr:nth-child(even)>td:nth-child(odd) {background-color:#eee} table>tbody>tr:nth-child(even)>td:nth-child(even){background-color:#ddd} 

 <table> <tbody> <tr><td>. . . . .</td><td>. . . . .</td><td>. . . . .</td></tr> <tr><td>. . . . .</td><td>. . . . .</td><td>. . . . .</td></tr> <tr><td>. . . . .</td><td>. . . . .</td><td>. . . . .</td></tr> <tr><td>. . . . .</td><td>. . . . .</td><td>. . . . .</td></tr> <tr><td>. . . . .</td><td>. . . . .</td><td>. . . . .</td></tr> </tbody> </table> 

Answer 2

Your column css has overridden the row css . Hence changed them for odd and even rows separately as below.

 table>tbody>tr:nth-child(odd){ background-color: #F7F7F7 !important; } table>tbody>tr:nth-child(even){ background-color: #FFF !important; } table>tbody>tr:nth-child(odd)>td:nth-child(odd){ background-color: #F2F2F2 !important; } table>tbody>tr:nth-child(odd)>td:nth-child(even){ background-color: #F7F7F7; } table>tbody>tr:nth-child(even)>td:nth-child(odd){ background-color: #FFF !important; } table>tbody>tr:nth-child(even)>td:nth-child(even){ background-color: #F2F2F2; } 

 <table> <tbody> <tr> <td>Row 1 Column 1</td> <td>Row 1 Column 2</td> <td>Row 1 Column 3</td> </tr> <tr> <td>Row 2 Column 1</td> <td>Row 2 Column 2</td> <td>Row 2 Column 3</td> </tr> <tr> <td>Row 3 Column 1</td> <td>Row 3 Column 2</td> <td>Row 3 Column 3</td> </tr> <tr> <td>Row 4 Column 1</td> <td>Row 4 Column 2</td> <td>Row 4 Column 3</td> </tr> </tbody> </table>