CSS tables: changement d'arrière-plan sur le vol stationnaire, y compris les autres lignes

J'ai créé un exemple de page avec un tableau. Si la page supprimés dans l'avenir, voici le code sur Pastebin.

Je tiens à souligner les lignes de la table sur le vol stationnaire. Il travaille pour la normale tr mais il ne fonctionne pas pour tr.alt (impair de lignes).

Code pour mettre en évidence:

tr:hover,tr.alt:hover
{
background: #f7dcdf;
}

Code pour faire impair de lignes de couleurs différentes:

tr.alt td
{
background: #daecf5;
}

Aucune idées de comment cela pourrait-il être fixé?

OriginalL'auteur pglaz | 2013-06-29

  1. 10

    Assurez-vous que la règle pour le vol stationnaire effet est en dessous de la .alt couleur comme ceci remplace les précédentes règles ou !important

    tr:hover,tr.alt:hover
{
    background: #f7dcdf!important;
}

    Notez également que vous vous appliquez la couleur de fond pour le .alt lignes pour les cellules (td), cette couleur apparaît "en avant" de la tr arrière-plan pour changer vos règles, donc les deux sont pour les cellules ou pour l'ensemble des lignes

    Merci, en effet, l'ordre était faux! 🙂
    Ce important?

    OriginalL'auteur koala_dev

  2. 2

    Le problème est que tr.alt td est plus spécifique puis tr.alt:hover selon css règles de cascade.

    Le moyen le plus facile serait de faire en sorte que le :hover règle devient plus spécifique puis la .alt règle. Cela peut être fait en changeant tr.alt td à tr.alt

    Au passage, savez-vous que vous n'avez pas besoin de la .alt classe de cibler les impair de lignes? Il est très utile :nth-child() pseudo classe qui peut prendre soin de cela pour vous. Vous pouvez lire tout ça ici: http://css-tricks.com/how-nth-child-works/

    J'ai pris la liberté de les appliquer à votre échantillon: http://jsfiddle.net/3tV9b/

    Notez que je n'ai fait que changer tr.alt td à tr:nth-child(2n+1) et supprimé tous les sélecteurs qui avait l' .alt classe.

    Le gros avantage de cette technique est que vous n'avez pas besoin de se soucier de maintenir le HTML, vous pouvez ajouter et supprimer des lignes que vous le souhaitez, et de l'alternance de couleur devrait continuer à travailler.

    Inconvénient est (bien sûr) la prise en charge dans IE, mais je pense que ce n'est pas vraiment une perte de fonctionnalité, et à l'intérieur des limites de gracieux dégrader.

    Merci beaucoup pour l'astuce! Un vrai gain de temps!

    OriginalL'auteur Pevara