How to alternate table row color using CSS?

Spread the love

Sometimes, we want to alternate table row color using CSS.

In this article, we’ll look at how to alternate table row color using CSS.

How to alternate table row color using CSS?

To alternate table row color using CSS, we use the nth-child pseudo-class.

For instance, we write

table tr:nth-child(odd) td {
  // ...
}
table tr:nth-child(even) td {
  // ...
}

to select the odd numbered rows with nth-child(odd).

And we select the odd numbered rows with nth-child(even).

Conclusion

To alternate table row color using CSS, we use the nth-child pseudo-class.

Leave a Reply

Your email address will not be published.