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>