Posted By

cryode on 01/08/10

Tagged

css
table

Versions (?)

Last Edited at 01/08/10 05:55pm

Statistics

Viewed 1146 times

Favorited by 1 user(s)

Related snippets

Table Checkerboard Background Color

/ Published in: CSS

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

<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>