portfolio | contact
Thursday the 30th

Playing with tables and css3

Thursday, 2:53 PM
Zebra stripes without stripe classes. Eventually, we'll actually be able to use this stuff......

table {border-top:0px solid;border-bottom:0px;}
td {padding:15px 10px; margin:10px 0px; border-bottom:3px solid #CC2D82; }
th {border-bottom:3px solid black;padding:20px 10px 0px 10px;text-align:left;}

th:nth-child(2n) {background:#5DB2FC}
th:nth-child(2n+1) {background:#75D1FF}

td:first-child {border-left:3px solid #CC2D82;}
td:last-child {border-right:3px solid #CC2D82;}
tr:nth-child(2n+1) td:nth-child(2n) {background:#FC5DB2}
tr:nth-child(2n+1) td:nth-child(2n+1) {background:#FF75D1}
tr:nth-child(2n) td:nth-child(2n) {background:#E8E8E8}
tr:nth-child(2n) td:nth-child(2n+1) {background:#FFFFFF}
tr:nth-child(2n) td:first-child {border-left:1px solid white;}
tr:nth-child(2n) td:last-child {border-right:1px solid white;}

[update: just realized that this is only working on ff3 on osx so the code is useless to 98% of all people, but I'm leaving it since its still fun. Ive replaced the example with an image so the rest of you can see what you're missing out on]

◄ back