Blog > detail

Just my tiny mind

Zebra Strip with CSS3

26-2-2012 Admin General 2 Comments

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:


asdfadfas
asdfadfas
asdfadfas
asdfadfas
asdfadfas
asdfadfas
asdfadfas


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


The page should be like:


[caption id="attachment_53" align="alignnone" width="76" caption="zebra strip"]zebra strip[/caption]


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.

Zebra Strip with CSS3 Zebra Strip with CSS3 Zebra Strip with CSS3

Zebra Strip with CSS3 Zebra Strip with CSS3 Zebra Strip with CSS3

Zebra Strip with CSS3

word word

Zebra Strip with CSS3

Zebra Strip with CSS3

Zebra Strip with CSS3