How to set alternate table row color using CSS?
Last Updated :
30 Jul, 2021
The :nth-child() selector in CSS is used to match the elements based on their position in a group of siblings. It matches every element that is the nth-child.
Syntax:
:nth-child(number) {
// CSS Property
}
Where number is the argument that represents the pattern for matching elements. It can be odd, even or in a functional notation.
- odd: It represents the elements whose position is odd in a series: 1, 3, 5, etc.
Syntax:
element:nth-child(even)
- even: It represents the elements whose position is even in a series: 2, 4, 6, etc.
Syntax:
element:nth-child(odd)
Example 1: It sets the color to alternate even rows in a table.
html
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: Lightgreen;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Designation</th>
<th>Salary</th>
</tr>
<tr>
<td>Steve</td>
<td>Manager</td>
<td>1,00,000</td>
</tr>
<tr>
<td>SURAJ</td>
<td>Assistant Manager</td>
<td>50,000</td>
</tr>
<tr>
<td>Khushboo</td>
<td>Analysist</td>
<td>65,000</td>
</tr>
<tr>
<td>Kartik</td>
<td>Worker</td>
<td>20,000</td>
</tr>
<tr>
<td>Saksham</td>
<td>Worker</td>
<td>20,000</td>
</tr>
</table>
</body>
</html>
|
Output:
Example 2: It sets the color to alternate odd rows in a table.
html
<!DOCTYPE html>
<html>
<head>
<title>
Set alternate row in table
</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(odd) {
background-color: Lightgreen;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Designation</th>
<th>Salary</th>
</tr>
<tr>
<td>Steve</td>
<td>Manager</td>
<td>1, 00, 000</td>
</tr>
<tr>
<td>SURAJ</td>
<td>Assistant Manager</td>
<td>50, 000</td>
</tr>
<tr>
<td>Khushboo</td>
<td>Analysist</td>
<td>65, 000</td>
</tr>
<tr>
<td>Kartik</td>
<td>Worker</td>
<td>20, 000</td>
</tr>
<tr>
<td>Saksham</td>
<td>Worker</td>
<td>20, 000</td>
</tr>
</table>
</body>
<html>
|
Output:
Supported Browser:
- Google Chrome 4.0
- Internet Explorer 9.0
- Firefox 3.5
- Opera 9.6
- Safari 3.2
CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...