Posted By

apphp-snippets on 02/17/13


Tagged

css table colors Alternating


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

Yavanosta
Abiotic


Alternating Table Color Rows in CSS


 / Published in: CSS
 

URL: http://www.apphp.com/index.php?snippet=css-alternating-table-color-rows

These 2 techniques can be used for alternating row-colors in a table.

  1. <style type="text/css">
  2. /* technique 1 */
  3. tbody tr:nth-child(odd){ background-color:#ccc; }
  4. /* technique 2 */
  5. TBODY TR.odd { background-color:#78a5d1; }
  6. </style>
  7.  
  8. <table>
  9. <tbody>
  10. <tr><td>Row1</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
  11. <tr><td>Row2</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
  12. <tr><td>Row3</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
  13. <tr><td>Row4</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
  14. <tr><td>Row5</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
  15. </tbody>
  16. </table>
  17.  
  18. <table>
  19. <tbody>
  20. <tr class="odd"><td>Row1</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
  21. <tr><td>Row2</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
  22. <tr class="odd"><td>Row3</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
  23. <tr><td>Row4</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
  24. <tr class="odd"><td>Row5</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
  25. </tbody>
  26. </table>

Report this snippet  

You need to login to post a comment.