Revision: 62339
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at February 17, 2013 20:24 by apphp-snippets
Initial Code
<style type="text/css"> /* technique 1 */ tbody tr:nth-child(odd){ background-color:#ccc; } /* technique 2 */ TBODY TR.odd { background-color:#78a5d1; } </style> <table> <tbody> <tr><td>Row1</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr> <tr><td>Row2</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr> <tr><td>Row3</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr> <tr><td>Row4</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr> <tr><td>Row5</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr> </tbody> </table> <table> <tbody> <tr class="odd"><td>Row1</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr> <tr><td>Row2</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr> <tr class="odd"><td>Row3</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr> <tr><td>Row4</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr> <tr class="odd"><td>Row5</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr> </tbody> </table>
Initial URL
http://www.apphp.com/index.php?snippet=css-alternating-table-color-rows
Initial Description
These 2 techniques can be used for alternating row-colors in a table.
Initial Title
Alternating Table Color Rows in CSS
Initial Tags
css, table
Initial Language
CSS