Caixa Sombra na linha da tabela que não aparece em determinados navegadores

Question

Jun 04, 2012, 02:07 AM

Caixa Sombra na linha da tabela que não aparece em determinados navegadores

Sombra de caixa CSS nas linhas da tabela -tr - não parece estar funcionando de forma consistente em todos os navegadores. Em alguns navegadores, a sombra é exibida; nos outros, não há sombra.

Eu estou usando o seguinte 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;
}

Aqui está umjsFiddle do trecho abaixo:

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;
}

<table>
  <tr>
    <td>&nbsp;</td>
    <th>One</th>
    <th>Two</th>
  </tr>
  <tr>
    <th>Title</th>
    <td>Three</td>
    <td>Four</td>
  </tr>
  <tr>
    <th>Title2</th>
    <td>Five</td>
    <td>Six</td>
  </tr>
  <tr>
    <th>Title3</th>
    <td>Seven</td>
    <td>Eight</td>
  </tr>
  <tr>
    <th>Title4</th>
    <td>Nine</td>
    <td>Ten</td>
  </tr>
</table>

Nota: O mesmo comportamento é observado quando se substitui<tr> com<div> e adicionandodisplay: table-row.