Posted By

cryode on 01/08/10


Tagged

css table checkerboard


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

pauloc


Table Checkerboard Background Color


 / Published in: CSS
 

URL: http://www.cryode.com

Very quick CSS addon to create a checkerboard background color "grid".

Not compatible with Internet Explorer (until they start accepting better CSS selectors).

  1. <style type="text/css">
  2.  
  3. /* Set a default background color to get a two-color effect,
  4. or apply only the second rule for a single color. */
  5. .grid tbody tr td { background-color: #ffc; }
  6.  
  7. .grid tbody tr:nth-child(odd) td:nth-child(even),
  8. .grid tbody tr:nth-child(even) td:nth-child(odd) { background-color: #eee; }
  9.  
  10. </style>
  11.  
  12. <table class="grid">
  13. <thead>
  14. <tr>
  15. <th>Header 1</th>
  16. <th>Header 2</th>
  17. <th>Header 3</th>
  18. <th>Header 4</th>
  19. <th>Header 5</th>
  20. </tr>
  21. </thead>
  22. <tbody>
  23. <tr>
  24. <td>Data</td>
  25. <td>Data</td>
  26. <td>Data</td>
  27. <td>Data</td>
  28. <td>Data</td>
  29. </tr>
  30. <tr>
  31. <td>Data</td>
  32. <td>Data</td>
  33. <td>Data</td>
  34. <td>Data</td>
  35. <td>Data</td>
  36. </tr>
  37. <!-- More rows... -->
  38. </tbody>
  39. </table>

Report this snippet  

You need to login to post a comment.