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