L'ombre de la boîte sur la ligne de la table n'apparaît pas sur certains navigateurs

CSS box-shadow sur les lignes de la table - tr - ne semble pas fonctionner de manière cohérente dans tous les navigateurs. Sur certains navigateurs, l'ombre est affiché; sur d'autres, il n'y a pas d'ombre.

J'utilise le CSS suivant: 

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

Voici un jsFiddle de l'extrait de code ci-dessous:

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>

Remarque: le même comportement est observé en remplaçant <tr> par <div> et en ajoutant display: table-row.

22
demandé sur BoltClock 2012-06-04 04:07:27

7 réponses

Comme mentionné précédemment, box-shadow Propriété fonctionne uniquement avec les éléments qui ont display: block ou display:inline-block propriété.

Si vous ajoutez display: block à la cellule de la table en tant que règle de style générale, elle s'effondrera, car les proportions automatiques de largeur/hauteur que les cellules avaient avec display:table ne seront plus appliquées. Pour simuler ce comportement, il suffit d'attribuer min-width attribut à chaque th et td.

Ensuite, appliquez box-shadow à la ligne (en vol stationnaire ou sans).

En résumé, votre code devrait ressembler à ce:

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

J'ai omis les préfixes du fournisseur pour plus de simplicité.

Voici l'exemple complet:

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;
}
<table cellpadding="0" cellspacing="0">
  <thead>
    <tr>
      <th>Phone number</th>
      <th>Date</th>
      <th>Name</th>
      <th>Label</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0342443</td>
      <td>10 August 2013</td>
      <td>Kate</td>
      <td>Loves cats</td>
      </td>
      <tr>
        <td>0342442</td>
        <td>9 August 2013</td>
        <td>Mary</td>
        <td>Boring</td>
      </tr>
      <tr>
        <td>0342441</td>
        <td>8 August 2013</td>
        <td>Anna</td>
        <td>Loves extreme stuff</td>
      </tr>
  </tbody>
</table>

Vous pouvez également vérifier le violon ici.

27
répondu Sviatoslav Zalishchuk 2016-03-14 15:13:48

Veuillez noter ce bug si vous voulez le voir corrigé:

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

Si vous voulez que les largeurs de cellules du tableau continuent à s'ajuster automatiquement, vous pouvez appliquer l'ombre aux cellules individuelles à la place: 

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

Exemple Complet ici. (jsfiddle)

(Inspiré par https://stackoverflow.com/a/10150898/724752)

Dans chaque boîte valeur d'ombre:

  • ajuster le 3ème numéro (rayon de flou) pour modifier le rayon de flou.
  • le 4ème Nombre (rayon de propagation) doit toujours être négatif et sa valeur absolue doit être supérieure au 3ème nombre (rayon de flou).
  • rendre le 1er nombre (décalage x) non nul pour obtenir une ombre à gauche ou à droite. Rendre sa valeur absolue 1 supérieure à la valeur absolue du 4ème Nombre (voir l'exemple ci-dessus à nouveau, beaucoup plus facile de voir ce que je veux dire).
  • rend le 2ème nombre (décalage y) non nul pour obtenir une ombre en haut ou bas. Rendre sa valeur absolue 1 supérieure à la valeur absolue du 4ème Nombre.
9
répondu David Winiecki 2017-05-23 11:54:40

J'ai eu le même problème. J'ai essayé de mettre en évidence une ligne entière lorsque la souris est dessus. Voici le code css pour cela: 

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

Cela fonctionne bien sur Mozilla Firefox (38.0.1) et Internet Explorer (11.0.9600.17801), tous deux sur Windows 7. Cependant, n'a pas fonctionné sur Chrome (43.0.2357.81).

Par conséquent, j'ai dû contourner le problème et j'ai fait un mélange des réponses de Sviatoslav Zalishchuk et David Winiecki. En conséquence, j'ai obtenu: 

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

Cela fonctionne bien et il ne casse pas le largeur de la colonne de la table et travaille toujours sur Mozilla et Explorer.

Ci-Dessous il y a un exemple complet:

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;
}
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Born</th>
      <th>City</th>      
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>David Gilmour</td>
      <td>6 March 1946</td>
      <td>Cambridge, England</td> 
	</tr>
    <tr>
      <td>Roger Waters</td>
      <td>6 September 1943</td>
      <td>Surrey, England</td>		
    </tr>
    <tr>
      <td>Nick Mason</td>
      <td>27 January 1944</td>
      <td>Birmingham, England</td>
    </tr>
    <tr>
      <td>Richard Wright</td>
      <td>28 July 1943</td>
      <td>London, England</td>
    </tr>
  </tbody>
</table>
4
répondu Marlos Damasceno 2015-06-08 13:16:29

Les raisons derrière cela semblent être le CSS par défaut - le display: block était le facteur le plus important.

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;
}
<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>
4
répondu Ian Wood 2016-03-14 15:27:16

Utiliser transform échelle(1,1) propriété avec box-shadow va résoudre le problème.

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

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

Merci!!

3
répondu Anurag Malhotra 2017-12-27 16:46:13

Maintenant, dans V53 Chrome, il a été corrigé et box-shadow fonctionne bien pour <tr></tr>!

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);
}
<table class="table">
  <caption>Optional table caption.</caption>
  <thead> 
    <tr> 
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr> 
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
1
répondu S-Kerrigan 2016-09-29 01:06:00

Je voulais une boîte-ombre sur le côté gauche de la rangée quand il a plané:

entrez la description de l'image ici

Je l'ai corrigé simplement en définissant l'ombre de la boîte sur la première cellule de la ligne. Comme ceci: 

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

Je l'ai essayé dans Firefox, Chrome et IE9. Semble bien fonctionner.

Si vous voulez une bordure de 1px autour de la ligne entière, vous pouvez faire quelque chose comme: 

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

entrez la description de l'image ici

0
répondu A.Daleby 2016-10-04 13:57:09