box-shadow on tr's

Question

Tengo problemas para poner box-shadow en tr s dentro de una tabla. El problema es que box-shadow no aparece en absoluto a menos que display de todos los tr s de la tabla esté establecido en block (una "solución" que encontré aquí: Box Shadow inside TR tag). Sin embargo, cuando el display de tr s se establece en block, hace que las celdas de la tabla ya no estén alineadas, apiñándose a la izquierda.

Aquí es un violín que demuestra el problema: http://jsfiddle.net/jFdEY/

Usted puede intentar cambiar que se aplique a todos los tr s, pero que causa otro problema (en el segundo cuadro abajo).

---

Aquí hay algunas fotos:

El uno sin display: block en todos los tr s (tabla muestra correctamente, pero box-shadow no funciona)

El condisplay: block en todo el tr s (box-shadow aparece pero el diseño de la tabla está roto)

Entonces, ¿hay alguna forma de evitar esto?

Answer 1

"Muchos de los elementos utilizados en las tablas no son block ni inline elementos."

Por esta razón, configurar todo TR a block es muy probable que se rompa el comportamiento natural de la tabla.

EDIT: Pude crear una solución similar al efecto deseado, sin embargo, requiere que las columnas tengan un ancho fijo.

Demostración: http://jsfiddle.net/jFdEY/2/

Técnicamente esto no es una tabla más sin embargo, sólo aparece como tal.