Zebra striped style
Here you’ll find an example of how to style HTML elements to have zebra striped look. This approach doesn’t use any JavaScript. It’s pure CSS without JavaScript. You can apply these zebra styles to any set of HTML elements by adding a class name. It’s possible to make striped tables, menus, list items etc.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<table> <tr class="zebra"> <td>Lorem ipsum</td> <td>Excepteur sint</td> </tr> <tr class="zebra"> <td>Lorem ipsum</td> <td>Excepteur sint</td> </tr> <tr class="zebra"> <td>Lorem ipsum</td> <td>Excepteur sint</td> </tr> </table> <ul style="width: 100px; margin: 0 auto;"> <li class="zebra">Lorem ipsum</li> <li class="zebra">Excepteur sint</li> <li class="zebra">Lorem ipsum</li> <li class="zebra">Excepteur sint</li> <li class="zebra">Lorem ipsum</li> <li class="zebra">Excepteur sint</li> </ul> |
1 2 3 4 5 6 7 |
.zebra { background: #eee; } .zebra:nth-child(even) /* odd or even */ { background: #ddd; } |
By adding “zebra” style you can make striped any HTML elements, not only tables.
Try it here http://codepen.io/starikovs/pen/ncqDI.