web-dev-qa-db-fra.com

L'ombre de la boîte sur la ligne du tableau n'apparaissant pas sur certains navigateurs

L'ombre de la boîte de dialogue CSS sur les lignes de la table - tr - ne semble pas fonctionner de manière uniforme sur tous les navigateurs Sur certains navigateurs, l'ombre est affichée. 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 du fragment 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é lors de la substitution de <tr> par <div> et de l'ajout de display: table-row.

csscss-tables
25
George

Comme mentionné précédemment, la propriété box-shadow ne fonctionne qu'avec les éléments dotés de la propriété display: block ou display:inline-block.

Si vous ajoutez display: block à la cellule du tableau en tant que règle de style générale, cela se réduira, car les proportions largeur/hauteur automatiques que les cellules avaient avec display:table ne seront plus appliquées. Pour simuler ce comportement, assignez simplement l'attribut min-width à chaque th et td.

Appliquez ensuite box-shadow à la ligne (en survol ou sans).

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

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 de fournisseur pour des raisons 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 consultez le violon ici .

29
Sviatoslav Zalishchuk

S'il vous plaît étoiles ce bug si vous voulez le voir être corrigé:

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

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

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 case, valeur de l'ombre:

  • Ajustez le troisième chiffre (rayon de flou) pour modifier le rayon de flou.
  • Le 4ème nombre (rayon étendu) doit toujours être négatif et sa valeur absolue doit être supérieure au 3ème nombre (rayon de flou).
  • Faites le 1er chiffre (offset x) différent de zéro pour obtenir une ombre à gauche ou à droite. Faites que sa valeur absolue 1 soit supérieure à la valeur absolue du 4ème nombre (voir à nouveau l'exemple ci-dessus, il est beaucoup plus facile de voir ce que je veux dire).
  • Définissez le deuxième nombre (décalage y) différent de zéro pour obtenir une ombre en haut ou en bas. Rendre sa valeur absolue 1 supérieure à la valeur absolue du 4ème nombre.
9
David Winiecki

Utilisez la propriété transform scale (1,1) avec box-shadow pour 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);
}

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

Merci!!

7
Anurag Malhotra

J'ai eu le même problème. J'essayais de mettre en évidence une ligne entière lorsque la souris le survolait. Ci-dessous 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 très bien sur Mozilla Firefox (38.0.1) et Internet Explorer (11.0.9600.17801), tous deux sur Windows 7. Cependant, cela ne fonctionnait pas 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 de David Winiecki. En conséquence, j'ai eu:

@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 cela ne casse pas la largeur de la colonne de la table et fonctionne toujours sur Mozilla et Explorer. 

Ci-dessous, 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
Marlos Damasceno

Les raisons derrière cela semblent aller jusqu'à CSS par défaut - le display: block était le facteur le plus important.

CSS/HTML/Démo

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
Ian Wood

Désormais, dans Chrome v53, cela corrige et box-shadow fonctionne bien pour <tr></tr>!

CSS/HTML/Démo

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
S-Kerrigan

en réaction, j'ai combiné la réponse ci-dessous. Cela a bien fonctionné en chrome,> firefox, ie11

.select_row{
    color: #43B149;
    font-weight: bolder !important;
    background: #e4e5e6 !important;
    box-shadow: 1px 0px 1px 0px #cad6ce !important;
    -moz-box-shadow:1px 0px 1px 0px #cad6ce !important;
    -webkit-box-shadow:1px 0px 1px 0px #cad6ce !important;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    td{box-shadow: 0px 3px 0px 0px #cad6ce !important;
        -moz-box-shadow:0px 3px 0px 0px #cad6ce !important;
        -webkit-box-shadow:0px 3px 0px 0px #cad6ce !important;
        background: #e4e5e6 !important;
    }
}
.table-forecast{
    border-collapse: separate;
    border-spacing: 0px;
}
0
VoHinh

Je voulais une boîte-ombre sur le côté gauche de la ligne lorsque survolé:

 enter image description here

Je l'ai corrigé simplement en plaçant l'ombre de la boîte sur la première cellule de la ligne. Comme ça:

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 large de 1 px sur toute la ligne, 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; }

 enter image description here

0
A.D