Éléments Pseudo sur les tables?

J'essaye d'appliquer un pseudo-élément à un <tr> mais il s'avère qu'elle ne fonctionne pas comme prévu. Je ne suis pas sûr si je suis absent quelque chose ou si c'est juste tout simplement pas possible.

Voici un jsfiddle exemple: http://jsfiddle.net/jDwCq/

Notez que si vous modifiez l'affichage de tr à display: block;, le pseudo-élément, mais il est affiché comme un bloc, plutôt que d'une table, dont j'ai besoin.

Est-il possible ou suis-je condamné?

exactement ce que sont que vous essayez d'atteindre avec cette?
Juste essayer de faire un cool hover effet pour les lignes de la table. Lorsque vous placez le pointeur de la lignes, je veux faire de la hauteur de l'expansion. Ou je veux qu'il ressemble au moins (je ne veux pas ajouter rembourrage ou un changement de la hauteur, car alors les frères et sœurs seront touchées). J'allais utiliser :before et :after pour la faire ressembler le haut et le bas de la ligne devient plus grande.

OriginalL'auteur qwerty | 2012-11-05

0
```
    tr:hover td{
      background: pink or whatever;
    }
tr:hover td:after{
  background: yellow;
}
```
Je ne vois pas la nécessité pour les pseudo-éléments.

Je dirai que le fait d'avoir un élément qui n'est pas une cellule, directement à l'intérieur d'une ligne, la demande de la douleur.
Vous pourriez toujours avoir un pseudo-élément à l'intérieur de chaque cellule d'une ligne cible. Avec le droit de css, il n'y aura aucune différence perceptible.

Exemple: http://jsfiddle.net/jDwCq/7/

Je ne suis pas sûr de comprendre pourquoi j'ai besoin de pseudo-éléments.
Basé sur mon expérience de tables et css, tout ce que vous voulez faire avec une ligne peut être fait par le style des cellules, et en général c'est plus cohérent. J'ai ajouté une modification à votre jsfiddle à ma réponse, pour montrer ce que je veux dire.
Succès! Je veux dire, j'ai compris qu'il ressemble vraiment à de la merde, et je suis probablement ne va pas à l'utiliser, mais il fonctionne! Voici un violon avec l'idée que j'avais: jsfiddle.net/LvGQD je souhaite que je pourrais jeter un peu de transitions css3 pour ces pseudo-éléments, de les faire glisser en place, ou peut-être s'estomper.

OriginalL'auteur daveyfaherty
1
```
table tr:before{
position: relative; /* Needed for pseudo elem */
display: block; /*Uncomment me and see what happens*/
}
```
cela devrait fonctionner...

La seule différence est que vous utilisez avant plutôt qu'après.. il ne fait aucune différence.

OriginalL'auteur Akhil
0

Juste mis display: inline-block; de TDs, et de leur donner une largeur (~33% chacun)... et supprimer position: absolute de la pseudoelement.

C'est ça: http://jsfiddle.net/jDwCq/6/
```
   table tr {
        /*position: relative; /* (REALLY NOT) Needed for pseudo elem */
        display: block; /*Uncomment me and see what happens*/
    }

    td {
        width: 32.9%; /* ADD THIS */
        display: inline-block; /* AND THIS */
    }

    table tr:after {
        /*position: absolute; REMOVE THIS TOO */
        top: 0px;
        left: 0px;
        display: block;
        content: '';
        text-indent: -99999px;
        background: red;
        height: 2px;
        /*width: 100%; NOT NEEDED */
    }
```
L'avantage de l'utilisation de display: table; est qu'il définit automatiquement la largeur de la colonne en fonction du contenu. Bien sûr, je pourrais coder en dur les largeurs, mais j'aimerais beaucoup préfèrent le faire afficher dans un tableau. Ce n'est pas possible, non?
Bien sûr, mais où, dans l'original de votre violon, u ne utilisation display: table ? 🙂
Ah, je voulais dire display: table-row;, et je crois que c'est la valeur par défaut pour les lignes de la table (qui serait logique).
Ah ok, c'est (w3.org/TR/CSS21/sample.html), mais votre tr:after ne fonctionne pas... je ne peux que le faire fonctionner comme ci-dessus, l'espoir qui aide à...
Yup, j'ai compris. Merci pour l'aide!

OriginalL'auteur Andrea Ligios
0

Pour rendre les lignes apparaissent plus à l'aide de ::before et/ou ::after pseudo-éléments que vous auriez à appliquer les éléments de la td éléments, mais de sélectionner les td des éléments basés sur la :hover de la tr:
```
td::before,
td::after {
    /* defines the default states/sizes */
    height: 0;
    display: block;
    content: '';
}

tr:hover td::before,
tr:hover td::after {
    /* adjusts attributes based on the parent tr's :hover event */
    height: 1em;
}
```
JS Fiddle démo.

Cependant, si le but est de " l'air cool¹', je vous conseille d'ajuster le style de la td éléments eux-mêmes (car de cette façon ils peuvent être animés), plutôt que d'utiliser les pseudo-éléments, qui vient de 'apparaissent':
```
td {
    padding: 0;
    -moz-transition: padding 1s linear;
    -ms-transition: padding 1s linear;
    -o-transition: padding 1s linear;
    -webkit-transition: padding 1s linear;
    transition: padding 1s linear;
}

tr:hover td {
    padding: 1em 0;
    -moz-transition: padding 1s linear;
    -ms-transition: padding 1s linear;
    -o-transition: padding 1s linear;
    -webkit-transition: padding 1s linear;
    transition: padding 1s linear;
}
```
JS Fiddle démo.

De cours à l'aide de cette approche, vous pouvez utiliser des effets de transition sur color, background-color, height, font-size border (-width ou -color), et d'ajuster le temps (ainsi que l'assouplissement).

Pour animer plusieurs propriétés, il est plus facile d'utiliser le mot-clé all (plutôt que les différents noms de propriété).
1. Étant donné que je suis plus de l'âge de trente ans, je vais avoir du mal à cerner, ou même reconnaissant, "cool" ces jours-ci; mais mon sept ans neveu m'assure que l'animation de la padding semble ok.' Vous pourriez peut-être consulter votre propre enfant-parents pour la fraîcheur des approches alternatives.
Je l'ai dit plus précisément que je n'ai pas envie d'utiliser de la hauteur ou de rembourrage pour développer la hauteur tout simplement parce que cela affecte l'enfant à lignes. Si vous passez la souris sur l'une des lignes, vous verrez que ceux ci-dessous saute en bas, ce qui n'est pas très agréable. L'idée était d'utiliser :before pour la partie supérieure de la ligne; il suffit de lui donner le même arrière-plan de la ligne et augmentez la hauteur de la :before au lieu de la ligne réelle. Même chose pour la partie inférieure, mais avec :after à la place. De cette façon, il semble que la ligne est en pleine expansion en hauteur.
Donc, expliquer, clairement, ce que vous voulez. Parce que je pense que je suis absent quelque chose, vous voulez la ligne à regarder comme il est en expansion sans réellement en expansion?
La ligne réel lui-même ne devrait pas être en expansion, qui ferait les frères et sœurs de sauter partout comme dans votre exemple. Ce que je veux, c'est faire la ligne de s'étendre, mais au lieu de prendre l'espace, tout dépassement de ce frères et sœurs. Pour l'obtenir?
C'est le résultat final que je recherche: jsfiddle.net/LvGQD. Je dois admettre qu'il n'a pas l'air très bon, et je suis probablement ne va pas à l'utiliser (pour cette fin, au moins), mais il fonctionne. Voyez-vous la différence entre votre exemple et le mien?

OriginalL'auteur David Thomas

Vous devez vous connecter pour publier un commentaire.