Add to del.icio.usAdd to DiggAdd to TechnoratiAdd to RedditAdd to FurlAdd to StumbleUponAdd to Slashdot
SUBSCRIBE




Everything You Ever Wanted To Do With Tables Using CSS3

I wrote this CSS up recently for one of my ventures and figured it would be a good learning tool about some of the cool things you can do with advanced CSS.

This CSS just about does it all:
  • alternating row colors
  • table td hover color
  • table rounded borders
  • compatability with CSS3 / Mozilla Firefox / Safari (sorry Internet Explorer, you suck)
  • demonstrates the use of CSS pseudo classes
'results' is our table class. 
.results {
    width:80%;    
    margin-left:20px;    
}
.results th {
    font-weight: bold;
    text-align: center;
    background-color:#fff;
}
.results td {    
    border-bottom: 1px solid #fff;
    padding: 3px 10px;
    vertical-align: middle;
}
.results tr td {
    background-color: #ebebeb;
}
.results tr:nth-child(odd) td {
    background-color: #dadada;
}
.results tr:first-child td:first-child {
    -moz-border-radius-topleft:10px;
    -webkit-border-top-left-radius:10px;
    border-bottom-top-radius:10px;
}
.results tr:first-child td:last-child {
    -moz-border-radius-topright:10px;
    -webkit-border-top-right-radius:10px;
    border-top-right-radius:10px;
}
.results tr:last-child td:first-child {
    -moz-border-radius-bottomleft:10px;
    -webkit-border-bottom-left-radius:10px;
    border-bottom-left-radius:10px;
}
.results tr:last-child td:last-child {
    -moz-border-radius-bottomright:10px;
    -webkit-border-bottom-right-radius:10px;
    border-bottom-right-radius:10px;
}
.results td:hover {
    background-color: #99ccff;
}
Results:
Loremipsumdolorsitamet
Loremipsumdolorsitamet
Loremipsumdolorsitamet
Loremipsumdolorsitamet
Loremipsumdolorsitamet
Loremipsumdolorsitamet


You can also set cellspacing to 0 for the table to remove the gaps between cells. Do not use the border-collapse CSS, that messes up border rounding
Loremipsumdolorsitamet
Loremipsumdolorsitamet
Loremipsumdolorsitamet
Loremipsumdolorsitamet
Loremipsumdolorsitamet
Loremipsumdolorsitamet
Happy coding :)
5 Comments
Banzai! 6 7
Nice Tutoril... :D
Your Name 0 0
max
Daniel Murker 2011/06/180 0
if you really needed to apply these css rules to the shite that is IE, you could just put a more generic CSS file in your code base as well, using conditional comments ( stuff like <!-- [if IE] --> or whatever it actually is) to figure out whether to load this css file, or a the generic CSS and a piece of javascript that can handle the difference.
Butterfly 2011/07/06 Contact Me0 0
Yo, that's what's up trutfuhlly.
Sudarsan Dash 2011/08/29 Contact Me0 0
Hey In IE also you can Do the rounded corners , however you require a htc file, i.e pie.htc and many more are available.
<- for private contact