Zebra Strip with CSS3

Zebra Strip with CSS3

In this tutorial, I would like to share about how to make Zebra Strip with CSS3. Just to keep in mind, not all browser are compatible with CSS3.

Fist, type the CSS3 code:

.septiadi tr:nth-of-type(even){
	background: lightblue;
}

Second, make the table with html code:

<table class="septiadi">
<tbody>
<tr>
<td>asdfadfas</td>
</tr>
<tr>
<td>asdfadfas</td>
</tr>
<tr>
<td>asdfadfas</td>
</tr>
<tr>
<td>asdfadfas</td>
</tr>
<tr>
<td>asdfadfas</td>
</tr>
<tr>
<td>asdfadfas</td>
</tr>
<tr>
<td>asdfadfas</td>
</tr>
</tbody>
</table>

We make a class in this css code to avoid the css style is implemented by other table.

The page should be like:

zebra strip

zebra strip

You can combine this css style with Highlight Table Row While Mouse Hover

We just made a simple Zebra Strip with CSS3 with less than 5 minutes 🙂

Good luck.

http://septiadi.com/2011/02/18/zebra-strip-with-css3/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: