Different background color for Odd / Even table rows - CSS

How can I set different background color in CSS for Odd and Even table rows ?
21 Sep 2019 at 07:58 PM
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>

22 Sep 2019 at 01:34 PM
0pnshow more
Share on FacebookShare on TwitterShare on LinkedInSend email
Follow us on Facebook & Twitter
2021 AnswerTabsTermsContact us