Advanced Search

Return to Snippet

Revision: 22314
at January 8, 2010 17:55 by cryode
Initial Code 
<style type="text/css">

/* Set a default background color to get a two-color effect,
	or apply only the second rule for a single color.  */
.grid tbody tr td { background-color: #ffc; }

.grid tbody tr:nth-child(odd) td:nth-child(even),
.grid tbody tr:nth-child(even) td:nth-child(odd) { background-color: #eee; }

</style>

<table class="grid">
	<thead>
    	<tr>
        	<th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
            <th>Header 4</th>
            <th>Header 5</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
        	<td>Data</td>
        	<td>Data</td>
        	<td>Data</td>
        	<td>Data</td>
        	<td>Data</td>
        </tr>
    	<tr>
        	<td>Data</td>
        	<td>Data</td>
        	<td>Data</td>
        	<td>Data</td>
        	<td>Data</td>
        </tr>
        <!-- More rows... -->
    </tbody>
</table>
Initial URL 
http://www.cryode.com
Initial Description 
Very quick CSS addon to create a checkerboard background color "grid".

Not compatible with Internet Explorer (until they start accepting better CSS selectors).
Initial Title 
Table Checkerboard Background Color
Initial Tags 
css, table
Initial Language 
CSS