7

I am trying to create an inset box shadow effect to a TR element inside a table but with no success. I am using the following CSS:

tr {
     -moz-box-shadow: inset 0 0 5px #888;
     -webkit-box-shadow: inset 0 0 5px#888;
     box-shadow: inner 0 0 5px #888;
  }

Live demo: http://jsbin.com/urage5/edit

Is it not possible to create that effect on a tr element?

Joel
  • 5,949
  • 12
  • 42
  • 58

3 Answers3

15

To preserve a functioning table you need to style the td-elements rather than tr. The same look as styling tr can be achieved by using the pseudo class :first-child and :last-child. Adding slightly different values to the box-shadow will do the trick - I also added border-radius for a better illustration:

td {
    box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}
td:first-child {
    border-radius: 5px 0 0 5px;
    box-shadow: 4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}
td:last-child {
    border-radius: 0 5px 5px 0;
    box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}

Check out the live example: http://jsfiddle.net/KtPdt/

For some more options also check out: https://stackoverflow.com/a/11002210/1106393

Community
  • 1
  • 1
AvL
  • 3,083
  • 1
  • 28
  • 39
  • 3
    +1 this is the safe way to go. I also did a stylus example with border on all edges here: http://stackoverflow.com/a/18973828/586086 – Andrew Mao Sep 24 '13 at 06:02
8

The only way I've found to enable a tr to show a box-shadow is to to set a display: block; on the tr element, though it means the row will no longer match the table width:

tr {
    -moz-box-shadow: inset 0 0 5px #888;
    -webkit-box-shadow: inset 0 0 5px #888;
    box-shadow: inset 1px 1px 5px #888;
    display: block;
}

td {
    padding: 0.5em; /* Just to spread things out a bit */
}

JS Fiddle demo.

This works on both Firefox 4 and Chromium 10.x, but fails on Opera 11.01 (all running on Ubuntu 10.10). I don't have access to either Mac or Windows, so I can't say how Safari, or IE will handle the display: block on tr elements, or even Firefox and Chrome running on different platforms.

keeri
  • 809
  • 2
  • 13
  • 19
David Thomas
  • 249,100
  • 51
  • 377
  • 410
  • 5
    Unfortunately, display:block makes the elements no longer line up in columns. – raylu Dec 17 '11 at 01:53
  • This is true; unfortunately it remains the only way of which I'm aware to enable the `box-shadow`... =/ – David Thomas Dec 17 '11 at 04:11
  • I eventually got this to work by creating a row above and below my row with a single colspan-ed cell and applying the box-shadow to that. Applying box-shadows to every single cell in the row works, but only if the blur and spread are 0px. – raylu Dec 18 '11 at 00:01
  • 2
    `display:block` breaks the functionality of the table and therefor makes no sense. – AvL Jun 12 '12 at 17:41
  • It's `box-shadow: inset 1px 1px 5px #888;`.. – Sven van Zoelen Aug 22 '12 at 15:33
7

Firefox shows shadow fine on tr tag.

Google Chrome has a bug. Vote this issue to hasten Chromium developers.

Leksat
  • 2,923
  • 1
  • 27
  • 26
  • It can be a choice. Because I think `box-shadow` is designed to be applicable only for blocks. My opinion is that it should be applicable to all – Pierre de LESPINAY Apr 17 '12 at 08:29