Alternating Table Color Rows In CSS

SUBMITTED BY: Guest

DATE: June 12, 2013, 1:22 a.m.

FORMAT: CSS

SIZE: 1.4 kB

Raw Download

HITS: 1156

Report
  1. <!-- source: http://www.apphp.com/index.php?snippet=css-alternating-table-color-rows -->
  2. <style type="text/css">
  3. /* technique 1 */
  4. tbody tr:nth-child(odd){ background-color:#ccc; }
  5. /* technique 2 */
  6. TBODY TR.odd { background-color:#78a5d1; }
  7. </style>
  9. <table>
  10. <tbody>
  11. <tr><td>Row1</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
  12. <tr><td>Row2</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
  13. <tr><td>Row3</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
  14. <tr><td>Row4</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
  15. <tr><td>Row5</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
  16. </tbody>
  17. </table>
  19. <table>
  20. <tbody>
  21. <tr class="odd"><td>Row1</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
  22. <tr><td>Row2</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
  23. <tr class="odd"><td>Row3</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
  24. <tr><td>Row4</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
  25. <tr class="odd"><td>Row5</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
  26. </tbody>
  27. </table>
comments powered by Disqus