Box Shadow en la fila de la tabla no aparece en ciertos navegadores

CSS box-shadow en las filas de la tabla – tr – no parece funcionar de manera consistente en todos los navegadores. En algunos navegadores, se muestra la sombra; en otros, no hay sombra.

Estoy usando el siguiente CSS:

 tr { background-color: rgb(165, 182, 229); box-shadow: 0px 2px 2px black; -moz-box-shadow: 0px 2px 2px black; -webkit-box-shadow: 0px 2px 2px black; } td, th { padding: 5px; text-align: left; } 

Aquí hay un jsFiddle del siguiente fragmento:

 tr { background-color: rgb(165, 182, 229); box-shadow: 0px 2px 2px black; -moz-box-shadow: 0px 2px 2px black, ; -webkit-box-shadow: 0px 2px 2px black; } td, th { padding: 5px; text-align: left; } 
 
  One Two
Title Three Four
Title2 Five Six
Title3 Seven Eight
Title4 Nine Ten

Nota: El mismo comportamiento se observa cuando se sustituye

por

y se agrega display: table-row .

Como se mencionó anteriormente, la propiedad box-shadow solo funciona con elementos que tienen display: block o display:inline-block propiedad display:inline-block .

Si agrega display: block a la celda de la tabla como una regla de estilo general, colapsará, ya que las proporciones automáticas de ancho / alto que tenían las celdas con display:table ya no se aplicarán. Para simular ese comportamiento, solo asigne el atributo min-width a cada th y td .

A continuación, aplique box-shadow a la fila (al pasar el mouse o sin él).

En resumen, tu código debería verse así:

 table { box-sizing: border-box; } td, th { padding-left: 16px; min-width: 170px; text-align: left; } tr { display: block; } tr:hover { box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.5); cursor: pointer; } 

He omitido los prefijos del vendedor por simplicidad.

Aquí está el ejemplo completo:

 table { box-sizing: border-box; border-bottom: 1px solid #e8e8e8; } td, th { padding-left: 16px; min-width: 170px; border: 1px solid #e8e8e8; border-bottom: none; font: 14px/40px; text-align: left; } td { color: #666; } tr { display: block; } th { color: #333; } tr:hover { background-color: #fbfbfb; box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.5); cursor: pointer; } 
 
Phone number Date Name Label
0342443 10 August 2013 Kate Loves cats
0342442 9 August 2013 Mary Boring
0342441 8 August 2013 Anna Loves extreme stuff

Por favor, marque este error si quiere que se solucione:

https://code.google.com/p/chromium/issues/detail?id=94871

Si desea que el ancho de la celda de la tabla continúe ajustándose automáticamente, puede aplicar la sombra a las celdas individuales en su lugar:

 td:first-child { box-shadow: inset 0px 11px 8px -10px blue, inset 0px -11px 8px -10px blue, inset 11px 0px 8px -10px blue; } td { box-shadow: inset 0px 11px 8px -10px blue, inset 0px -11px 8px -10px blue; } td:last-child { box-shadow: inset 0px 11px 8px -10px blue, inset 0px -11px 8px -10px blue, inset -11px 0px 8px -10px blue; } 

Ejemplo completo aquí . (jsfiddle)

(Inspirado por https://stackoverflow.com/a/10150898/724752 )

En cada valor de sombra del cuadro:

  • Ajuste el tercer número (radio de desenfoque) para cambiar el radio de desenfoque.
  • El 4 ° número (radio de dispersión) siempre debe ser negativo y su valor absoluto debe ser mayor que el 3 ° (radio de desenfoque).
  • Haga que el primer número (desplazamiento x) sea distinto de cero para obtener una sombra a la izquierda o a la derecha. Haga que su valor absoluto sea 1 mayor que el valor absoluto del 4 ° número (vea el ejemplo anterior otra vez, es mucho más fácil ver lo que quiero decir).
  • Haga que el segundo número (desplazamiento y) sea distinto de cero para obtener una sombra en la parte superior o inferior. Establezca su valor absoluto 1 mayor que el valor absoluto del 4 ° número.

Tuve el mismo problema. Estaba tratando de resaltar una fila completa cuando el mouse estaba sobre ella. A continuación está el código CSS para él:

 tr:hover { outline: none; -webkit-box-shadow: inset 0 0 10px #337AB7; box-shadow: inset 0 0 10px #337AB7; } 

Funciona bien en Mozilla Firefox (38.0.1) e Internet Explorer (11.0.9600.17801), ambos en Windows 7. Sin embargo, no funcionó en Chrome (43.0.2357.81).

Por lo tanto, tuve que dar una vuelta de tuerca e hice una combinación de las respuestas de Sviatoslav Zalishchuk y David Winiecki. Como resultado obtuve:

 @media screen and (-webkit-min-device-pixel-ratio:0) { tr:hover td:first-child { box-shadow: inset 0px 11px 8px -10px #337AB7, inset 0px -11px 8px -10px #337AB7, inset 11px 0px 8px -10px #337AB7; } tr:hover td { box-shadow: inset 0px 11px 8px -10px #337AB7, inset 0px -11px 8px -10px #337AB7; } tr:hover td:last-child { box-shadow: inset 0px 11px 8px -10px #337AB7, inset 0px -11px 8px -10px #337AB7, inset -11px 0px 8px -10px #337AB7; } } tbody > tr:hover { outline: none; -webkit-box-shadow: inset 0 0 10px #337AB7; box-shadow: inset 0 0 10px #337AB7; } 

Eso funciona bien y no rompe el ancho de la columna de la tabla y sigue trabajando en Mozilla y Explorer.

A continuación hay un ejemplo completo:

 table { box-sizing: border-box; border-collapse: collapse; } td, th { padding-left: 10px; padding-right: 10px; border: 1px solid #dddddd; font: 14px; text-align: left; } /*To work only on Chrome and Safari*/ @media screen and (-webkit-min-device-pixel-ratio:0) { tr:hover td:first-child { box-shadow: inset 0px 11px 8px -10px #337AB7, inset 0px -11px 8px -10px #337AB7, inset 11px 0px 8px -10px #337AB7; } tr:hover td { box-shadow: inset 0px 11px 8px -10px #337AB7, inset 0px -11px 8px -10px #337AB7; } tr:hover td:last-child { box-shadow: inset 0px 11px 8px -10px #337AB7, inset 0px -11px 8px -10px #337AB7, inset -11px 0px 8px -10px #337AB7; } } /*To work on the others browsers*/ tbody > tr:hover { outline: none; -webkit-box-shadow: inset 0 0 10px #337AB7; box-shadow: inset 0 0 10px #337AB7; } 
 
Name Born City
David Gilmour 6 March 1946 Cambridge, England
Roger Waters 6 September 1943 Surrey, England
Nick Mason 27 January 1944 Birmingham, England
Richard Wright 28 July 1943 London, England

Las razones detrás de esto se reducen al CSS predeterminado: la display: block fue el factor más importante.

CSS / HTML / Demo

 tr { background-color: rgb(165, 182, 229); display: block; margin-bottom: 5px; -moz-box-shadow: 0px 2px 2px black; -webkit-box-shadow: 0px 2px 2px black; box-shadow: 0px 2px 2px black; } td,th { padding: 5px; text-align: left; } 
 
  One Two
Title Three Four
Title2 Five Six
Title3 Seven Eight
Title4 Nine Ten

Usar propiedad transform scale (1,1) con box-shadow resolverá el problema.

 tr:hover { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); box-shadow: 0px 0px 5px rgba(0,0,0,0.3); -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.3); } 

Fiddle: https://jsfiddle.net/ampicx/5p91xr48/

¡¡Gracias!!

¡Ahora, en v53 Chrome se corrigió y box-shadow funciona bien para

!

CSS / HTML / Demo

 table { border-spacing: 0 10px; border-collapse: separate; } tbody { display: table-row-group; vertical-align: middle; } tr { margin-bottom: 9px; } tr:hover { box-shadow: 0 5px 8px 0 rgba(50, 50, 50, 0.35); -webkit-box-shadow: 0 5px 8px 0 rgba(50, 50, 50, 0.35); -moz-box-shadow: 0 5px 8px 0 rgba(50, 50, 50, 0.35); } 
 
Optional table caption.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Quería una sombra de caja en el lado izquierdo de la fila cuando estaba suspendida:

enter image description here

Lo arreglé simplemente configurando la sombra de caja en la primera celda de la fila. Me gusta esto:

 tr:hover { background: #EEF0F3; cursor: pointer; } tr:hover td:first-child { box-shadow: inset 2px 0 0 0 #323335; } 

Lo probé en Firefox, Chrome e IE9. Parece que funciona bien.


Si quiere un borde ancho de 1px alrededor de toda la fila, podría hacer algo como:

 tr:hover td { box-shadow: 0 1px 0 0 black, 0 -1px 0 0 black; } tr:hover td:first-child { box-shadow: 0 -1px 0 0 black, -1px 0 0 0 black, 0 1px 0 0 black; } tr:hover td:last-child { box-shadow: 0 -1px 0 0 black, 1px 0 0 0 black, 0 1px 0 0 black; } 

enter image description here