Creating table with rollover effect using Divs & CSS

June 7, 2011

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 “csshover3.htc” and you will find tons of postings) but quickly noticed that table row rollover effect with CSS/csshover3.htc 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.