by
7
7
352k
5
Top 1% !
Popular
Pearl of Wisdom
Nice
Tagged
Specified
MultiPlatform
Popularity: 2674th place

Published on:

Languagecss
LicenseMIT_X11

Css zebra color for alternate style in table rows

This simple code shows how to alternate the style of each row in a table.
tr:nth-child(even) or tr:nth-child(odd) operators help in switching style automatically for each row item in a table.
Copy Embed Code
<iframe id="embedFrame" style="width:600px; height:300px;"
src="https://www.snip2code.com/Embed/54372/Css-zebra-color-for-alternate-style-in-t?startLine=0"></iframe>
Click on the embed code to copy it into your clipboard Width Height
Leave empty to retrieve all the content Start End
<html> <head> <title> Example of zebra color </title> <style> tr:nth-child(even) { background-color: red; } tr:nth-child(odd) { background-color: white; } </style> </head> <body> <table id="myTable"> <th>Lorem ipsum dolor.</th> <th>Nam, sequi, architecto?</th> <th>Aut, eius, esse!</th> <tr> <td>Lorem ipsum dolor.</td> <td>Doloribus, quidem, excepturi.</td> <td>Magnam, dolorum, alias!</td> </tr> <tr> <td>Lorem ipsum dolor.</td> <td>Odio, fuga, distinctio.</td> <td>Cumque, necessitatibus, labore!</td> </tr> <tr> <td>Lorem ipsum dolor.</td> <td>Esse, suscipit, soluta.</td> <td>Nostrum, animi, fugit?</td> </tr> <tr> <td>Lorem ipsum dolor.</td> <td>Error, veritatis, saepe?</td> <td>Alias, cupiditate, debitis.</td> </tr> <tr > <td>Lorem ipsum dolor.</td> <td>Minus, neque, quisquam.</td> <td>Eius, deleniti, sunt.</td> </tr> </table> </body> </html>
If you want to be updated about similar snippets, Sign in and follow our Channels

blog comments powered by Disqus