Ligne de la Table de Box-Shadow sur le vol Stationnaire (Webkit)

Est-ce possible?

Mon code fonctionne sur Firefox. Je peux également obtenir webkit pour modifier d'autres propriétés (par exemple la couleur de fond, etc.) sur le vol stationnaire, mais la zone d'ombre n'a pas de prise d'effet:

tr:hover {
    -webkit-box-shadow: 0px 2px 4px #e06547;
    -moz-box-shadow: 0px 2px 4px #e06547;
    box-shadow: 0px 2px 4px #e06547;
    background-color: #d4d5d6;
}
- Je trouver des styles sur tr n'ont pas le meilleur soutien.

OriginalL'auteur Anthony C | 2011-05-12

  1. 20

    Que la réponse ici: https://stackoverflow.com/a/11002077/1106393 plutôt que de style tr vous devriez style de la td-élément en combinaison avec le pseudo classes :first-child et :last-child. Ajoutant tr:hover va faire l'affaire pour vous:

    tr:hover td {
-moz-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}
tr:hover td:first-child {
-moz-box-shadow: 4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
box-shadow: 4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}
tr:hover td:last-child {
-moz-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}

    Démo 1 avec en médaillon: http://jsfiddle.net/Kk6Th/

    Mise à jour:

    Démo 2 sans cadre (classique de l'ombre portée): http://jsfiddle.net/2nw4t/1/

    Démo 3 sans cadre (lueur effet): http://jsfiddle.net/2CSuM/

    ...Mais, ne fonctionne que pour les inset. Même tripoter sans inset sur les ombres
    Il fonctionne sans inset: violon C'est seulement la quatrième propriété box-shadow (anciennement -3px) qui n'a pas l'air bon. Changer de 0...
    Eh bien, vous avez en effet fait regarder à droite, +1! C'est toujours dommage que je ne pouvais pas l'utiliser, parce que mes cellules sont transparents (et je voulais juste un "éclat" comme effet). Ma solution: superposition d'une liste (dans ce cas, un <nav> avec <a>s) sur le dessus de la table. Ce qui a fonctionné, parce que je voulais que chaque être un lien (également résolu le problème de ne pas être en mesure d'envelopper l'ensemble de <tr> dans un lien). Mais si j'avais un plus compliqué la situation est différente, il devrait être JS-seulement, malheureusement.
    pensez-vous qu'il est possible de faire ce travail (sans cartouche) lorsqu'également d'avoir un haut & à gauche de l'ombre sur la ligne? J'ai essayé de changer les valeurs de la box-ombre, mais ne pouvait pas le faire fonctionner sans avoir un peu d'ombre se déversant sur le voisin de gauche/de droite de la cellule.
    Découvrez les édité réponse: Démo 3 (travaux, mais un peu hacky... testé Uniquement sur webkit)

    OriginalL'auteur AvL

  2. 1

    Je suis confronté à ce problème et j'ai trouvé quelques solutions de contournement:

    1. Ajouter de l'ombre sur tous les td.
    2. Ensemble display: block sur tr.
    3. Utiliser correctement style td:first-child:before.
    4. Ajouter de l'ombre à tous les td et couvrir une partie que nous n'avons pas besoin.

    Vous pouvez les consulter sur cette jsFiddle:
    https://jsfiddle.net/maskl/cxscmvpr/3/

    OriginalL'auteur Marek

  3. 1

    Je suis tombé sur ce post tout en traitant avec un problème similaire, récemment. Je crois que j'ai trouvé un autre en utilisant l'approche de display: flex; avec position: relative; propriétés sur votre tr élément en CSS avec beaucoup moins de balisage (peu td de style et de moins de pseudo style):

    Installation tr que flexbox

    tr {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
position: relative;
align-items: center; /* Vertically aligns td's inside the tr */        
}

    C'est le TR comme un flexbox qui lui permet d'être touchés par z-index sans casser sa position dans les DOM. Tout ce que vous devez, ensuite, est d'ajuster l' z-index de la tr:hover pseudo-élément et ajouter votre background-color et box-shadow effets:

    Installation :hover Effets

    tr:hover {
z-index: 1 /* or higher if necessary */
-webkit-box-shadow: 0px 2px 4px #e06547;
-moz-box-shadow: 0px 2px 4px #e06547;
box-shadow: 0px 2px 4px #e06547;
background-color: #d4d5d6;
}

    Vous devrez peut-être ajuster la taille et la position de td éléments à l'intérieur de la tr flexbox à l'aide de la align-items puisque nous ne sommes plus à l'aide de la tr est par défaut display: table-row de la propriété. Vous centrez votre td éléments verticalement à l'aide de thr align-items: center; propriété (voir ci-dessus). Ensuite, vous définissez votre td largeur

    td {
width: 10em;
}

    Voir le travail de violon ici: https://jsfiddle.net/t68b9cwd/6/

    Cette solution est assez universelle, avec les navigateurs modernes de la manipulation de ce sans préfixes mais il peut y avoir des cas avec les anciens navigateurs que vous pouvez avoir besoin d'effectuer des solutions de contournement (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox) et est similaire à la façon dont Google styles de lignes dans Gmail.

    OriginalL'auteur Kenneth Petty

  4. 0

    Ce qui m'est arrivé et j'ai mis quelques petites border-radius sur elle, et il fonctionne.

    border-radius: 1px;

    Selon le look que vous essayez d'atteindre, il peut être un hack que vous pouvez utiliser.

    Testé et pas de travail. En outre, border-radius n'a aucun effet sur les lignes de la table, même si vous en voulais un (au moins sur Webkit, qui est la question à portée de main).

    OriginalL'auteur Kenny

  5. 0

    AvL de la solution est très bon, merci pour l'astuce. Mais si comme moi vous voulez le box-shadow (inset) dans l'ensemble tr, et pas seulement d'un côté, ce code devrait vous aider :

    tr:hover td {
-webkit-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset, 0 -4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}
tr:hover td:first-child {
-webkit-box-shadow: 4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset, 4px -4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}
tr:hover td:last-child {
-webkit-box-shadow: -4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset, -4px -4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}

    OriginalL'auteur Fanch

  6. 0

    Utilisation transformer é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!!

    OriginalL'auteur Anurag Malhotra

  7. -2

    Ajouter cette

    tr {
display: block;
}

    Pour quelque raison Webkit doit explicitement sais que l'élément est un élément de bloc pour afficher une zone d'ombre.

    Cela fonctionne, MAIS.. la ligne de la table (naturellement) commence à agir comme un élément de bloc. Donc, l'auto-espacement, et colspan, etc. se perd. Ce serait bien si on pouvait avoir notre gâteau et le manger aussi.
    les navigateurs n'aime pas ça, et pourtant...

    OriginalL'auteur ramono