Fancy HTML tables with CSS

Related

Based on this entry's title, content and categorisation, the following entries may be related:

I got an email from an anonymous reader a few days ago who, after presumably reading my recent article on “pretty tables”, wanted to know if there was a way to extend the idea:

Do you know if it’s possible to change the background colour of an entire table row on a “mouseover event” without using javascript? I know how to do this using image rollovers and javascript but I’m wandering if there’s some way of doing it using CSS instead.

Well miss anonymous, the answer is yes. It is possible. By using a “hover pseudo-class” declaration for the table row and combining it with the "!important" rule, you can get the effect you’re after:

KeyValue
ACTAustralian Capital Territory
NSWNew South Wales
NTNorthern Territory
QLDQueensland
SASouth Australia
TASTasmania
VICVictoria
WAWestern Australia

The CSS code you’ll need, preferably in a separate file:

table.fancy {
  margin: 1em 1em 1em 0;
  background: whitesmoke;
  border-collapse: collapse;
}
table.fancy tr:hover {
   background: lightsteelblue !important;
}
table.fancy th, table.fancy td {
  border: 1px silver solid;
  padding: 0.2em;
}
table.fancy th {
  background: gainsboro;
  text-align: left;
}
table.fancy caption {
  margin-left: inherit;
  margin-right: inherit;
}

The HTML code is very simple with "fancy" being the only class declaration:

<table class="fancy">
<tr>
<th>Key</th><th>Value</th>
</tr>
<tr>
<td>ACT</td><td>Australian Capital Territory</td>
</tr>
<tr>
<td>NSW</td><td>New South Wales</td>
</tr>
<tr>
<td>NT</td><td>Northern Territory</td>
</tr>
<tr>
<td>QLD</td><td>Queensland</td>
</tr>
<tr>
<td>SA</td><td>South Australia</td>
</tr>
<tr>
<td>TAS</td><td>Tasmania</td>
</tr>
<tr>
<td>VIC</td><td>Victoria</td>
</tr>
<tr>
<td>WA</td><td>Western Australia</td>
</tr>
</table>

If you’ve read the previous article, you’ll notice that both the HTML and the CSS code is identical, except that our new “fancy table” contains one additional declaration:

table.fancy tr:hover {
   background: lightsteelblue !important;
}

Easy, wasn’t it? Again, change the colours to suit your own bad taste. Of course, this won’t work in MSIE, due to it’s buggy CSS behaviour.

Join the discussion. 8 responses so far.

  1. Saturday, 8 December 2007 By Mike

    Any reason I cannot get this to work in IE?

  2. Saturday, 8 December 2007 By Ivan

    Yeah, there is Mike. Read the last paragraph of my post.

  3. Sunday, 9 December 2007 By Mike

    My bad, now I see it. Do you have any suggestions to a style that would work in both IE and Firefox?

  4. Sunday, 9 December 2007 By Ivan

    Dean Edwards has a IE7 JS library which makes IE behave like a modern standards-compliant browser, although I'm guessing that it won't work with IE6.

  5. Thursday, 13 December 2007 By Mike

    Thanks for your help!

  6. Wednesday, 26 March 2008 By Bosko

    In other words, this won't work for >90% of people looking at your site? Thanks for the advice.

  7. Wednesday, 26 March 2008 By Ivan

    Bosko, I'm not sure how you came to that mathematical conclusion, and I assume that you just took a wild guess, but you're completely wrong. It won't work for <22% of people looking at our site, because 22% is the total ratio of our IE visitors, including IE7, which is much better in terms of the way it understands CSS rules.

  8. Saturday, 13 December 2008 By City

    Thanks for the post. I really like that it highlights the row, when you hover over it.

Leave a reply:

Please note that all fields are required, unless indicated otherwise. To protect your privacy, your email address will not be displayed.





You can use Markdown or basic XHTML tags for formatting and linking but not BBCode. By submitting a comment, you hereby grant perpetual license to reproduce your words, name, and website in attribution.