Advanced Search

Table Checkerboard Background Color

/ Published in: CSS
Save to your folder(s)
Very quick CSS addon to create a checkerboard background color "grid".

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

Expand | Embed | Plain Text

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

URL: http://www.cryode.com

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.