Question

I’m trying to build a table (filled with actual tabular data), and get an outline effect for a row on hover. I’ve tried a couple ideas, but cross-browser issues are holding me back. Would love to hear any ideas.

Idea #1: Add CSS outline when hovering over <tr>. Works in IE8 & FF3, but not IE7 or Chrome (Webkit, so probably Safari too). The actual implementation of the hover is omitted for brevity:

<table style="margin:10px;width:800px">
    <tbody>
        <tr style="outline:red solid 3px">
            <td>Test 1</td>
            <td>Test 2</td>
        </tr>
    </tbody>
</table>

Idea #2: Position a <div> under the <tr> that is wider/taller than the <tr>, and use z-index to stack the <div> below the <tr>, but on top of adjacent <tr>s. This is much more interesting, because I can potentially do rounded corners, opacity, etc. This looked promising, but so do many ideas when implemented first in Firefox. After reading up on z-index and playing around with code in several different browsers, I’m totally frustrated. The stacking/ordering I’m trying here is maybe too complex to work in different browsers.

Example code using jquery-ui and Position (http://wiki.jqueryui.com/Position):

[non-working code link removed]

---

EDIT: Super awesome slightly kludgish solution below including opacity and rounded corners in all but IE. I’ll have to do a blog writeup one of these days on all the little issues.

Answer 1

I made idea #2 work, which I think is pretty nifty. Several tricks had to be used. First, block elements had to be put inside td elements in order to get z-index working in several browsers. I used span elements with display:block to fill the entire td, which means some td css properties will have to be put inside those span elements and further nested but not yet added span elements (borders and padding in particular).

I added some opacity and rounded corners (no rounded corners in IE).