How to make alternative table row colors using CSS

Its now easy creating the alternative table row colors using CSS styles. You do not need to use Javascript for achieving this process.

You can just do it in simple steps by adding odd and even to the tr of tables.

Description Size Quantity
Tshirt Medium 10
Pant 32 10
Jeans 34 10

HTML:

<table>
<tbody>
<tr>
<th>Description</th>
<th>Size</th>
<th>Quantity</th>
</tr>
<tr>
<td>Tshirt</td>
<td>Medium</td>
<td>10</td>
</tr>
<tr>
<td>Pant</td>
<td>32</td>
<td>10</td>
</tr>
<tr>
<td>Jeans</td>
<td>34</td>
<td>10</td>
</tr>
</tbody>
</table>

 

CSS Style Sheet:

table,thead,th,tr,td {
border: 1px solid black;
padding:5px;
border-collapse:collapse;
}

table {
margin-bottom:10px;
}

th {
background:grey;
color:white;
}

tbody tr:nth-child(even) {
background-color: #bada55;
}

tbody tr:nth-child(odd) {
background-color: lightblue;
}

tbody tr:nth-child(even): It converts the even rows to your desired color and
tbody tr:nth-child(odd): This converts the odd rows to your desired color

Try this trick in your code and let us know your issues through comments. we will help you solve it.