Styling alternate HTML table rows differently
You may use the CSS nth-child selector to style alternate table rows differently. Not only may you style alternative rows but also specify a different style for rows with the given number. For example, styling every 3rd or 4th row is different from the other rows.
See the examples below where I will use odd, even, and other numbers in the nth-child selector.
An example of styling alternate rows by odd value
In this example, the odd value is used in the nth-child selector. That means, the first (header), third, and fifth rows will be assigned the style specified in the nth-child selector:
HTML and CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.nth-table {
border-collapse: collapse;
border: 1px solid #824100;
}
.nth-table tr:nth-child(odd){
background: #9DCECE;
}
.nth-table th{
border: 1px dotted #FFA346;
color: #3E5260;
padding:12px;
}
.nth-table td{
border: 1px dashed #000;
color: #002F5E;
padding:12px;
width:90px;
}
</style>
</head>
<body>
<table class="nth-table">
<tr>
<th>Product ID</th>
<th>Product Name</th>
<th>Product Quality</th>
<th>Product Quantity</th>
</tr>
<tr>
<td>1</td>
<td>Wheat</td>
<td>Good</td>
<td>200 Bags</td>
</tr>
<tr>
<td>2</td>
<td>Rice</td>
<td>Good</td>
<td>250 Bags</td>
<tr>
<td>3</td>
<td>Sugar</td>
<td>Good</td>
<td>200 Bags</td>
</tr>
<tr>
<td>3</td>
<td>Sugar</td>
<td>Good</td>
<td>200 Bags</td>
</tr>
<tr>
<td>3</td>
<td>Sugar</td>
<td>Good</td>
<td>200 Bags</td>
</tr>
</table>
</body>
</html>
A demo of using even value in nth-child selector
Only a few changes are made in above CSS along with using the even value in CSS nth-child selector in the tr instead of odd. Have a look at the output:
The CSS:
.nth-table {
border-collapse: collapse;
border: 1px solid #400040;
}
.nth-table tr:nth-child(even){
background: #FFB0FF;
}
.nth-table th{
border: 1px dotted #460046;
color: #000;
padding:13px;
background-color:#AFD8D8;
}
.nth-table td{
border: 1px dashed #000;
color: #002F5E;
padding:12px;
width:90px;
}
You can see, the second row is assigned the style specified in nth-table tr:nth-child(even). Then, the row number fourth, sixth and so on.
A demo of styling every third row differently
As mentioned earlier, you may not only differentiate the alternate rows by using odd or even but also may specify a number to differentiate each 2nd, 3rd, 4th and so on rows.
For that, simply use the number in nth-child, for example,
nth-table-number tr:nth-child(3n)
The CSS used for this demo:
nth-table-number {
border-collapse: collapse;
border: 1px solid #400040;
}
.nth-table-number tr:nth-child(3n){
background: #DEF3CA;
}
.nth-table-number th{
border: 1px dotted #460046;
color: #000;
padding:13px;
background-color:#86C442;
border-radius:5px;
}
.nth-table-number td{
border: 1px dashed #000;
color: #002F5E;
padding:12px;
width:90px;
border-radius:50%;
text-align: center;
}
You can see, every third row is assigned a different style. Get the complete code from the demo page.
A demo of start styling after certain rows
You may need to show differently styled rows in an HTML table after a certain number of rows. For example, showing first five rows in the same style and after that each odd or even row showing differently. You may use nth-child in an advanced way as follows to achieve that.
See this demo where I started styling odd rows differently after first four rows (the row count includes the table header that you may style differently).
This is how the nth-child selector is used:
tr:nth-child(n+4):nth-child(odd)
Similarly, you may use the nth-child selector in <td> or other elements for styling differently.