Le doy box-shadow a tr en un table Está funcionando bien en todos los navegadores, pero en IE-10 se muestra box-shadow en todo td , ¿Por qué?

tr {
  box-shadow: 2px 0 0px #888 inset;
}
<table border=0 cellsapcing=0 cellpadding=6>
  <tr>
    <th>Column</th>
    <th>Column</th>
    <th>Column</th>
    <th>Column</th>
  </tr>
  <tr>
    <td>Column</td>
    <td>Column</td>
    <td>Column</td>
    <td>Column</td>
  </tr>
</table>

Chrome

ingrese la descripción de la imagen aquí

IE 10

ingrese la descripción de la imagen aquí

Nota: no puedo usar border por eso le di box-shadow

9
Abhishek Pandey 17 ene. 2017 a las 14:23

1 respuesta

La mejor respuesta

Adoptaría un enfoque un poco diferente y asignaría la sombra del cuadro a los primeros elementos th y td. Esta solución se mueve alrededor del problema, en lugar de resolverlo, pero es igual de válida que creo.

tr th:first-child, tr td:first-child {
  box-shadow: 2px 0 0px #888 inset;
}
<table border=0 cellsapcing=0 cellpadding=6>
  <tr>
    <th>Column</th>
    <th>Column</th>
    <th>Column</th>
    <th>Column</th>
  </tr>
  <tr>
    <td>Column</td>
    <td>Column</td>
    <td>Column</td>
    <td>Column</td>
  </tr>
</table>
7
Tom 17 ene. 2017 a las 14:32
En realidad, en mi proyecto, este enfoque necesita más personalización, por lo que estoy considerando esta opción como última opción.
 – 
Abhishek Pandey
17 ene. 2017 a las 14:50
Asignar estilos al elemento físico <tr> siempre es arriesgado ya que la forma en que los navegadores los manejan es inconsistente en el mejor de los casos. Realmente recomiendo evitar los estilos en las filas de la tabla tanto como sea posible solo para hacer su vida más fácil.
 – 
Tom
17 ene. 2017 a las 14:52
¡Bien! Voy con tu opción, pero aún quiero saber por qué sucede esto, gracias por hacerme la vida más fácil: p: D.
 – 
Abhishek Pandey
17 ene. 2017 a las 14:57