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
How to create simple horizontal dropdown CSS menu bar ?
Set CSS/HTML opacity - transparent background but not text
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.✕