Will Perone

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 :)
7 Comments
Banzai! 119 242
Nice Tutoril... :D
Your Name 0 0
max
Daniel Murker 2011/06/182 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.
Norafikah 2012/09/10 Contact Me0 0
I could just delete your coenmmt because you're advertising on my blog without contributing any thoughtful or meaningful discussion, but what the heck let's debate. I'm feeling argumentative this morning.FlexiPanels looks like it's very easy to use, but it also seems like it uses at least three PNG images for each style of box, which are hard-coded in style attributes on each DIV element. These images are fixed-width, meaning if you want two different size boxes, you'll need six images, so on and so forth. Wow, that's a lot of data to force users to download for something as simple as rounding the corners on your boxes.If you're not interested in the HTML or CSS that goes on behind the scenes of your website presentation, FlexiPanels may be a viable option, but this post (and all of my blog posts, for that matter) is really about making an efficient and lightweight solution that is as flexible and as easy to use as possible. FlexiPanels doesn't even utilize Firefox/Safari's built-in border-radius attribute! Why? Imagine eliminating the need for users to download images AT ALL for your corner boxes! This is a no-brainer in modern web design, and I think you should really consider updating your solution to include this fantastic CSS3 specification.I think that most people who read my blog aren't necessarily interested in a solution where they can click a button and get an instant fancy-box. We're interested in the nitty-gritty that goes on behind the scenes. We're the guys who started out in web design by opening notepad and typing our HTML in directly. We hate those WYSIWYG tools, and all the nasty things they do to our nicely formatted XHTML documents. I certainly hope that there's still other people out there like me, at least.That's my rant. Happy styling!Posted by on November 10, 2009 at 10:54 am.
Marc 2013/03/010 0
I think there's a typo here:

border-bottom-top-radius:10px;

Thanks!
<- for private contact