Different background color for Odd / Even table rows - CSS | |||||||||||
| How can I set different background color in CSS for Odd and Even table rows ? | |||||||||||
| |||||||||||
| Hi, To create a table with different colors for header, odd and even rows, you can use the solution below.  <style> .tableone { border-collapse: collapse; font-family: Arial; font-size: 11pt; } .tableone td { text-align: left; padding: 7px; width: 150px; } .tableone tr:nth-child(odd) {background-color: #D9E1F2;} .tableone tr:nth-child(even) {background-color: #FFFFFF;} .tableone th { text-align: center; padding: 7px; font-weight: bold; color: #FFFFFF; background-color: #4472C4; } </style> <table class="tableone"> <tr> <th>Name</th> <th>City</th> <th>Country</th> </tr> <tr> <td>Brandon</td> <td>Brussels</td> <td>Belgium</td> </tr> <tr> <td>Victoria</td> <td>London</td> <td>United Kingdom</td> </tr> <tr> <td>Zoe</td> <td>Paris</td> <td>France</td> </tr> <tr> <td>Florian</td> <td>Vienna</td> <td>Austria</td> </tr> </table> | |||||||||||
| |||||||||||
|
| |||||||||||
    | |||||||||||
| 2021 AnswerTabs | Terms | Contact us |
