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

Smooth move of HTML elements - animation with CSS

Set CSS/HTML opacity - transparent background but not text

How to change Checkbox to Toggle slider button using CSS ?

Resize / shrink top navigation menu bar on Scroll in Javascript

2021 AnswerTabsTermsContact us