I am encountering an issue trying to add a box-shadow to tr elements within a table. The problem arises when the box-shadow does not display unless all the tr elements are set with a display property of block, as suggested in this workaround: Box Shadow inside TR tag. However, setting the display of tr elements to block causes alignment issues, with cells on the left side crowding together.
You can see the problem illustrated in this fiddle: http://jsfiddle.net/jFdEY/
Attempting to apply the solution to all tr elements leads to another issue, shown in the second image below.
Here are some images:
The first one without display: block on all tr elements (table layout works but no box-shadow)
The second one with display: block on all tr elements (box-shadow displays but breaks table layout)
Is there a way to resolve this dilemma?