Different background color for Odd / Even table rows - CSS

How can I set different background color in CSS for Odd and Even table rows ?
posted on 21.09.2019 at 19:58
0pnshow more
onefiveonefive
Hi,

To create a table with different colors for header, odd and even rows, you can use the solution below.

table different colors header odd even rows

<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>
posted on 22.09.2019 at 13:34
0pnshow more
TimTim
share on facebookshare on twitter
2020 AnswerTabsTermsContact us
This site uses cookies to improve your experience, for analytics and ads. By continuing to browse this site you agree to our use of cookies.