You can style alternate table rows color using the CSS. Apply and highlight the background color of alternate table rows using the CSS property :nth-child selector. You can pass the numbers like 1,2,3… or you can pass the number expression like n, n+1, 2n+1…. or any expressions and also the argument even or odd.

How to Style Alternate Table Rows Color of Using CSS

To apply the style or highlight the alternate table row, you have to first decide table even rows or odd rows.

Let’s see for each type of the table row even or odd.

Style Alternate Table Rows Color and Highlight the Background of Even Rows

If you want to style and highlight the even rows of a table, you have to pass the argument ‘even’ or number expression ‘2n+2’ as the argument of the :nth-child selector.

Below is the example to style and apply the background CSS property using the even rows.

Output

Sr. No. Cricketer Name Score
1 Sunil Narayan 123
2 Akshar Patel 87
3 Sarfaraz Husain 34
4 Kunal Pandya 93
5 Hardik Pandya 87
6 Neel Patel 90

How to Style Alternate Table Rows Color and Highlight the Odd Rows

If you want to style, highlight the background color of the odd rows of a table, you have to pass the argument ‘odd’ or number expression ‘2n+1’ as the argument of the :nth-child selector.

Below is the example to apply the background color CSS property using the odd rows.

Output

Sr. No. Cricketer Name Score
1 Sunil Narayan 123
2 Akshar Patel 87
3 Sarfaraz Husain 34
4 Kunal Pandya 93
5 Hardik Pandya 87
6 Neel Patel 90

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.