box-shadow on tr's

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开发者_JS百科 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?

"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.