How to set alternate table row color using CSS? - GeeksforGeeks

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>          <!-- CSS style to set alternate table             row using color -->    <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.
ysachin2314
CSS-Misc
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Design a web page using HTML and CSS
Create a Responsive Navbar using ReactJS
Form validation using jQuery
How to apply style to parent if it has child with CSS?
How to auto-resize an image to fit a div container using CSS?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Convert a string to an integer in JavaScript
How to calculate the number of days between two dates in javascript?