In this tutorial, learn how to highlight alternate table row color using CSS. The Short answer is: Use nth-child selector of CSS to give alternate background to table rows.

You can apply background, borders or any other CSS to alternate table rows using the method given here. Give CSS to odd rows of a table or even rows of a table using CSS. You may also like to read how to define CSS for Internet Explorer and add IE-only stylesheet.

Highlight Alternate Table Row Odd

To highlight odd alternate rows of a table, you can use keyword ‘odd’ in the nth-child selector. The example to apply CSS for the odd rows of a table, use the below code.

You can also use the number expression to apply the CSS to the odd alternate table rows of a table. To apply the odd alternate table rows, you have to use the number expression 2n+1. This applies the CSS to the odd rows of the table from the start.

Below is the simple example which uses the same number expression to apply and highlight alternate table row in odd numbers.

Output

Sr. No. Name Country Highest Score
1 Mahendra Singh Dhoni India 183*
2 Chris Gayle West Indies 215
3 Rohit Sharma India 264
4 Fakhar Zaman Pakistan 210*

The above example applies the background color to the odd rows of a table. Apply any CSS to the alternate rows of a table using the above-given method.

Highlight Alternate Table Row Even

If you want to apply the CSS to the even rows of a table, you can use the keyword ‘even’ in the nth-child selector. Use the below-given method to apply the CSS to even alternate rows of a table.

In addition to this, you can also apply CSS to even rows of a table using the keyword expression also. To apply CSS to even rows, use the number expression 2n in the nth-child selector.

Output

Sr. No. Name Country Highest Score
1 Mahendra Singh Dhoni India 183*
2 Chris Gayle West Indies 215
3 Rohit Sharma India 264
4 Fakhar Zaman Pakistan 210*

The above example contains the table with highlighted alternate even rows.

You may also like to read.

Hope, you like this tutorial of how to highlight alternate table row color using CSS. If you have any query regarding the tutorial, please comment below. Also tell me, which method are you using to highlight alternate table rows?

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.