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

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


.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;


<table class="tableone">
<td>United Kingdom</td>

posted on 22.09.2019 at 13:34
0pnshow more
share on facebookshare on twitter
2021 AnswerTabsTermsContact us