box-shadow on tr's

Question

I am having problems putting a box-shadow on trs inside a table. The problem is that the box-shadow doesn't show up at all unless the display of all the trs of the table is set to block (a 'fix' I found here: Box Shadow inside TR tag). However, when the display of trs is set to block, it makes the table cells no longer line up, crowding all to the left.

Here's a fiddle demonstrating the problem: http://jsfiddle.net/jFdEY/

You can try changing it to apply to all trs but that causes another problem (in the second picture below).

---

Here's some pictures:

The one without display: block on all the trs (table displays properly but box-shadow doesn't work)

The one with display: block on all the trs (box-shadow shows up but the table layout is broken)

So, is there a way around this?

Answer 1

"Many of the elements used within tables are neither block nor inline elements."

For this reason setting all TR to block is most likely breaking the natural table behavior.

EDIT: I was able to create a solution similar to your desired effect however it requires that the columns have fixed width.

Demo: http://jsfiddle.net/jFdEY/2/

Technically this isn't a table anymore though, just appears as such.