Creating table with rollover effect using Divs & CSS

I recently had to create a simple html page with the following:

  • Table with 4 columns
  • Header row
  • When user mouse-over a cell, entire row is highlighted – rollover effect
  • Row is click-able, take user to another page
  • If required Javascript, can’t use jQuery

I thought OK, that’s so simple, until I realized that CSS hover rule (i.e. tr:hover) won’t work on IE. IE ignores CSS hover rule other than the ones on link (a:hover). I know there is a hack for IE (Google “” and you will find tons of postings) but quickly noticed that table row rollover effect with CSS/ is a bit finicky on IE — Of course! Why don’t we have one universal browser?!? Ugh.

Anyways, I then decided to just create a table using Div/CSS. After few trial and error, I created what I need and it works on Firefox, IE and Safari. Didn’t have to write any Javascript either. I am not a CSS expert by any mean, so let me know if you know an easier and cleaner way to implement this. ^^

Until the day we have 1 single universal browser… struggle continues.
Table with Rollover effect on Row using CSS

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s