Table Row Box-Shadow on Hover (Webkit)

Question

Is this possible?

My code works on Firefox. I can also get webkit to change other properties (e.g. background color, etc.) on hover, but the box shadow doesn't take effect:

tr:hover {
    -webkit-box-shadow: 0px 2px 4px #e06547;
    -moz-box-shadow: 0px 2px 4px #e06547;
    box-shadow: 0px 2px 4px #e06547;
    background-color: #d4d5d6;
}

I find styles on `tr` don't have the best support. – alex May 12 '11 at 01:56 — alex, May 12 '11 at 01:56

score 24 · Accepted Answer · edited May 23 '17 at 12:10

24

As answered here: https://stackoverflow.com/a/11002077/1106393 rather than styling tr you should style the td-element in combination with the pseudo classes :first-child and :last-child. Prepending tr:hover will do the trick for you:

tr:hover td {
    -moz-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
    -webkit-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
    box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}
tr:hover td:first-child {
    -moz-box-shadow: 4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
    -webkit-box-shadow: 4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
    box-shadow: 4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}
tr:hover td:last-child {
    -moz-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
    -webkit-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
    box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}

Demo 1 with inset: http://jsfiddle.net/Kk6Th/

Update:
Demo 2 without inset (classic drop shadow): http://jsfiddle.net/2nw4t/1/
Demo 3 without inset (glow effect): http://jsfiddle.net/2CSuM/

edited May 23 '17 at 12:10

Community

1
1

answered Jun 12 '12 at 18:00

AvL

3,083
1
28
39

...But, only works for `inset`. [Same fiddle without `inset` on the shadows](http://jsfiddle.net/2nw4t/) – Camilo Martin Aug 31 '12 at 21:51
2

It does work without `inset`: [fiddle](http://jsfiddle.net/2nw4t/1/) It's only the fourth property in box-shadow (formerly `-3px`) which doesn't look good. Change it to `0`... – AvL Sep 03 '12 at 11:14
Well, you indeed made it look right, +1! It's still a pity that I couldn't use that, because my cells are transparent (and I just wanted a "glow-like" effect). My solution: overlay a list (in this case a `
` with ``s) on top of the table. Which worked, because I wanted each to be a link (also solved the problem of not being able to wrap a whole `` in a link). But if I had a more complicated different situation it would have to be JS-only unfortunately.
– Camilo Martin Sep 04 '12 at 01:06
@AvL: do you think it's possible to make this work (without inset) when also having a top & left shadow on the row? I tried changing the values of the box-shadow but could not get it to work without having some shadow spilling over the neighboring left/right cell. – Adriano Apr 28 '14 at 11:43
1

@AdrienBe: Check out the edited answer: Demo 3 (works, but getting a bit hacky… Only tested on webkit) – AvL Apr 28 '14 at 15:18
@AvL: nice, I see that you're doing some magic inside `tr:hover td:after` to hide the spilling shadow in the inner tds, that's pretty clever even if it's a bit hacky. – Adriano Apr 28 '14 at 15:27

score 9 · Answer 2 · answered Dec 27 '17 at 17:03

Use transform scale(1,1) property with box-shadow it will solve the problem.

tr:hover {
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
}

Fiddle: https://jsfiddle.net/ampicx/5p91xr48/

Thanks!!

score 1 · Answer 3 · answered Apr 22 '16 at 13:15

I am facing this problem and I found a few workarounds:

Add shadow on all td.
Set display: block on tr.
Use properly styled td:first-child:before.
Add shadow to all td and cover parts that we don't need.

You can check them on this jsFiddle: https://jsfiddle.net/maskl/cxscmvpr/3/

Kenneth Petty · Answer 4 · 2018-08-16T12:11:34.133

I ran into this post while dealing with a similar problem, recently. I think I have found another approach using the display: flex; along with position: relative; properties on your tr element in CSS with much less markup (little td styling and less psuedo styling):

Setup `tr` as flexbox

tr {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    align-items: center; /* Vertically aligns td's inside the tr */        
}

This sets up the TR as a flexbox which allows it to be affected by z-index without breaking it's position in the DOM. All you need to, then, is adjust the z-index of the tr:hover pseudo element and add your background-color and box-shadow effects:

Setup `:hover` Effects

tr:hover {
    z-index: 1 /* or higher if necessary */
    -webkit-box-shadow: 0px 2px 4px #e06547;
    -moz-box-shadow: 0px 2px 4px #e06547;
    box-shadow: 0px 2px 4px #e06547;
    background-color: #d4d5d6;
}

You may need to adjust the size and position of td elements inside of the tr flexbox using the align-items since we are no longer using the tr's default display: table-row property. You would center your td elements vertically using thr align-items: center; property (see above). Then you set your td width

td {
    width: 10em;
}

See the working fiddle here: https://jsfiddle.net/t68b9cwd/6/

This solution is fairly universal, with modern browsers handling this without prefixes but their may be instances with older browsers that you may need to perform workarounds (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox) and is similar to how Google styles the rows in Gmail.

score 0 · Answer 5 · answered May 28 '12 at 20:08

0

This happened to me and I put some minor border-radius on it, and it works.

border-radius: 1px;

Depending on the look you are trying to achieve, it might be a hack you can use.

answered May 28 '12 at 20:08

Kenny

1

2

Tested and not working. Besides, border-radius has no effect whatsoever on table rows, even if you wanted one (at least on Webkit, which is the issue at hand). – Camilo Martin Aug 31 '12 at 21:54

score 0 · Answer 6 · answered Oct 03 '14 at 01:42

AvL's solution is very good, thank you for the tip. Though if like me you want the box-shadow (inset) in the whole tr, not just a side, this code should help you :

tr:hover td {
    -webkit-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset, 0 -4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}
tr:hover td:first-child {
    -webkit-box-shadow: 4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset, 4px -4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}
tr:hover td:last-child {
    -webkit-box-shadow: -4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset, -4px -4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}

score -3 · Answer 7 · answered Jun 30 '11 at 19:04

-3

Add this

tr {
    display: block;
}

For some reason Webkit needs to explicitly know that the element is a block element to display a box-shadow.

answered Jun 30 '11 at 19:04

ramono

462
5
16

2

This works BUT.. the table row (naturally) starts acting like a regular block element. So the auto-spacing, and colspan, etc. gets lost. Would've been nice if we could have our cake and eat it too. – Danny C Nov 21 '11 at 12:54

Table Row Box-Shadow on Hover (Webkit)

7 Answers7

Setup `tr` as flexbox

Setup `:hover` Effects

Linked

Related

Table Row Box-Shadow on Hover (Webkit)

7 Answers7

Setup tr as flexbox

Setup :hover Effects

Linked

Related

Setup `tr` as flexbox

Setup `:hover` Effects