Highlighting a table row with something other than background color

Question

I'm trying to find a reasonable CSS style for highlighting a particular table row (i.e. on a click selection) that doesn't involve changing the background color, because the row colors already serve a purpose in my application.

This probably means making the border stand out or doing something to the background that doesn't change its color. I've tried the following

• border: 2px ... with margin: -2px or something like that. However, it doesn't display too well, especially when the table is scrolling, and doesn't offer a good highlight without a super thick border. Browser support of borders on <tr> elements also isn't great.
• outline: 3px ... only seems to display on the top and bottom when the div containing the table is scrollable.
• box-shadow: 5px 5px ... color inset doesn't seem to display properly without messing up the table.

Does anyone have any good CSS suggestions for how to achieve this?

Answer 1

It turns out that you can do this using css selectors on the <td> elements, being careful with the two ends. For example, I created the following stylus code, which could be turned into a mixin. The trick is to use a negative spread value to get rid of the borders that would show up on any side you don't want, while using the blur and horizontal/vertical values to get the nice effect on the sides you do want. The blur must be at most half the spread.

shadow-color = rgba(0,0,0,0.5)
shadow = 15px
-shadow = - shadow
blur = 5px
spread = -10px

tr.selected > td
    box-shadow:
        0 shadow blur spread shadow-color inset,
        0 -shadow blur spread shadow-color inset

// Since we have to, make the top left and bottom right corners the dark overlapping ones
tr.selected > td:first-child
    box-shadow:
        shadow -shadow blur spread shadow-color inset,
        0 shadow blur spread shadow-color inset

tr.selected > td:last-child
    box-shadow:
        0 -shadow blur spread shadow-color inset,
        -shadow shadow blur spread shadow-color inset

This creates a shadow border like the following, allowing any background color to still show up:

However, it's not possible to do this with normal (non-inset) box-shadows because they will show up in between the table cells.

Answer 2

Change the HTML to:

<td style="padding:20px;">
   <div class="tdContentWrapper">
    <div>SomeStuff</div>
    <div>SomeMoreStuff</div>
   </div>
 </td>

Change the CSS to:

#MyTable .tdContentWrapper:hover{
  background: black;

}

Answer 3

How about increasing the padding and/or line-height with a subtle increase in font-size?

The row gets highlighted explicitly enough without affecting the visual styling of its corresponding peers; I might even tweak the color, if it's possible, depending on the alternating backgrounds.