Advanced Search

Alternating Table Color Rows in CSS

/ Published in: CSS
Save to your folder(s)
These 2 techniques can be used for alternating row-colors in a table.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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>

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.