Sélectionnez uniquement la première ligne dans une table avec les css

J'ai dans une page HTML, de nombreux tableaux, dont certains sont à l'aide de seulement tr & td d'autres sont à l'aide de tout ce qu'ils peuvent: thead, tbody, tfoot, tr, th & td.

Parce que certaines questions nous sommes à l'aide d'une règle CSS pour rendre le haut et le bord gauche de la table et chaque td dispose de son propre droit et de la bordure inférieure.

Parce que cette chose dont nous avons besoin pour obtenir le td's dans tous les quatre coins et autour de leurs coin.

Comment puis-je faire une seule règle qui permet de sélectionner uniquement la première ligne de la table?

Je suis en utilisant cette règle jusqu'à présent:

table.unit tr:first-child td:first-child, table.units thead tr:first-child th:first-child {
  border-top-left-radius: 10px;
}
table.unit tr:first-child td:last-child, table.units thead tr:first-child th:last-child {
  border-top-right-radius: 10px;
}

Dans ce jsfiddle vous pouvez voir mon problème: (http://jsfiddle.net/NicosKaralis/DamGK/)

  • est-il un moyen de résoudre les 2 implémentations en même temps?
  • si il y est, comment puis-je le faire?
  • si non, pouvez-vous m'aider à trouver la meilleure façon de le faire?

P. S.: je peux changer l'élément de la table, mais il fera beaucoup plus de refactoring dans des bibliothèques tierces, de sorte que nous ne voulons pas changer.

Je ne pense pas que c'est faisable en CSS seul. Avez-vous des jQuery disponible?
je préfère utiliser les css seul, mais si c'est la seule option que je préfère, de changer de table et le visage le refactoring
Votre violon n'est pas d'illustrer la description du problème clairement. Pensez-vous que vous souhaitez sélectionner la première et la dernière des cellules de la première ligne dans l'ensemble de la table, peu importe si la ligne est dans un thead, tbody ou tfoot? Que dire de la dernière ligne? Que devez-vous faire si il y a deux cellules d'en-tête et les données des cellules?
Je suppose qu'il veut mettre en évidence les cellules à l'angle de la table, quel que soit le tableau des wrappers comme thead, tbody et tfoot.

OriginalL'auteur Nicos Karalis | 2013-03-20

  1. 3

    Je pense que vous avez été trop spécifique

    Mis à jour: réponse originale à cette question n'ont pas l'enfant direct de sélecteurs de garder l'enfant sélecteurs d'éléments de la multiplication de petits-enfants, etc.

    Je crois ce violon montre ce que vous voulez. Il utilise simplement ce code pour sélectionner l'un des coins de la table des éléments, peu importe la configuration:

    /* This works for everything */
.unit > :first-child > :first-child > :first-child, /* Top left */
.unit > :first-child > :first-child > :last-child,  /* Top right */
.unit > :last-child > :last-child > :first-child,  /* Bottom left */
.unit > :last-child > :last-child > :last-child    /* Bottom right */
{
    background: red;
}

    Bien sûr, vous pouvez utiliser table.unit si votre .unit classe est mis sur d'autres éléments en plus d'un table pour réduire la sélection quelque peu, mais la clé est de garder l'enfant sélecteurs de vague.

    Cette approche rompt le balisage chaque fois qu'il existe des éléments HTML imbriquée dans les cellules de tableau.
    Bon appel, j'ai besoin de mettre à jour direct avec l'enfant sélecteurs.

    OriginalL'auteur ScottS

  2. 0

    Vous pouvez traiter avec le thead des situations de ce genre:

    tr td:first-child, tr th:first child {some styles}
thead + tbody tr td:first-child {revert the above styles}

    Cependant, je ne vois pas comment vous pouvez traiter la même situation pour le pied de page. Vous pouvez avoir besoin d'utiliser des scripts.

    J'ai essayé ta solution, mais je ne pouvais toujours pas le corriger
    A un violon? Il est un sélecteur de frères.
    Ok, maintenant je l'ai eu, laissez-moi vérifier cette
    ok, j'ai réussi à sélectionner uniquement la première ligne de la table (jsfiddle.net/NicosKaralis/DamGK/2), mais maintenant, comment puis-je sélectionner seulement ceux dans le fond?
    Citer moi-même, "je ne vois pas comment vous pouvez traiter la même situation pour le pied de page". 🙂 Le problème est que vous ne pouvez pas sélectionner un précédent de la fratrie avec les CSS.

    OriginalL'auteur isherwood

  3. 0

    Vous n'avez pas à changer la structure de vos tables. Ils correspondent au standard HTML et il y a une solution propre CSS pour obtenir l'effet que vous avez demandé à propos. À l'aide de la :first-child et :last-child sur la table d'enrubannage éléments thread, tbody et tfoot vous permet de récupérer uniquement les cellules dans les coins de l'ensemble de la table. Voici les détails.

    La * sélecteur de simplement sélectionner tous les éléments. Mais le > est signifie seulement d'appliquer l'effet de diriger les enfants. Donc nous sortons tous de la table d'emballage les éléments énumérés ci-dessus. À une profondeur d'enfants d'un table comme tr ou td sont affectés.

    D'inclure à la fois th et td, nous avons de nouveau utiliser * avec > pour récupérer tous les enfants directs d'une ligne de tableau, indépendamment du fait qu'ils sont th ou td. Vous pouvez définir le sélecteur pour les deux de la même façon.

    .unit > *:first-child > tr:first-child > *:first-child,
.unit > *:first-child > tr:first-child > *:last-child,
.unit > *:last-child  > tr:last-child  > *:first-child,
.unit > *:last-child  > tr:last-child  > *:last-child {
    background: red;
}

    J'ai fait un travail de démonstration basé sur le code que vous avez fournie sur la question.

    De toute façon, vous n'avez pas dit nous ce que avez-vous besoin de cela pour et il pourrait y avoir une meilleure façon de réaliser cela. Par exemple, si vous souhaitez fournir les coins ronds, vous pouvez appliquer l'effet à l' table élément d'un emballage div.

    OriginalL'auteur danijar