answersAnswerTabs
 Ask question

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
Related questions
How to add side by side rows in excel pivot table ?
CSS font-size units PX to PT, IN, EM, REM conversion
Full screen Not Clickable overlapping layer / overlay - CSS
Set CSS/HTML opacity - transparent background but not text
Smooth move of HTML elements - animation with CSS
CSS @Media min-width and max-width use together
2021 AnswerTabsTermsContact us