Sélectionnez seulement la première ligne d'une table avec css

j'ai dans une page HTML de nombreux tableaux, dont certains n'utilisent que tr & td d'autres utilisent tout ce qu'ils peuvent: thead, tbody, tfoot, tr, th & td .

parce que certaines questions, nous utilisons une règle CSS pour faire la frontière supérieure et gauche de la table et chaque td a sa propre frontière droite et inférieure.

parce que cette chose particulière nous devons obtenir le td 's dans les quatre coins et autour de leur coin spécifique.

Comment puis-je faire une règle simple qui peut sélectionner seulement la première ligne dans le tableau?

j'utilise 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?
  • s'il y en a, comment puis-je le faire?
  • si non, pouvez-vous aider moi trouver la meilleure façon de le faire?

P.S.: Je peux changer l'élément des tables, mais il fera tellement plus de remaniement dans les bibliothèques tierces, donc nous ne voulons pas changer cela.

5
demandé sur BoltClock 2013-03-20 17:52:44

3 réponses

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

Updated : la réponse originale ne contenait pas les sélecteurs directs pour enfants pour empêcher les sélecteurs pour enfants de se propager aux petits-enfants, etc.

je crois ce violon montre ce que vous voulez. Il utilise simplement ce code pour sélectionner les coins des éléments de la table, 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 pourrait utiliser table.unit si votre classe .unit est placée sur d'autres éléments en plus d'un table pour réduire quelque peu la sélection, mais la clé est de garder les sélecteurs enfants vague.

3
répondu ScottS 2013-04-11 17:19:21

vous pouvez gérer les situations de thead comme ceci:

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 pourriez gérer la même situation pour le tfoot. Vous devrez peut-être utiliser des scripts.

0
répondu isherwood 2013-03-20 14:01:43

Vous n'avez pas à changer la structure de vos tables. Ils correspondent à la norme HTML et il existe une solution utilisant des CSS propres pour obtenir l'effet que vous avez demandé. En utilisant les éléments d'enrubannage :first-child et :last-child sur la table thread , tbody et tfoot vous permet de récupérer seulement les cellules aux coins de la table entière. Voici les détails.

le sélecteur * sélectionne simplement tous les éléments. Mais le > est signifie appliquer seulement l'effet aux enfants directs. Par conséquent, nous récupérons tous les éléments d'enrubannage de table énumérés ci-dessus. Aucun enfant plus profond d'un table comme tr ou td ne sont touchés.

pour inclure à la fois th et td , nous utilisons à nouveau * avec > pour aller chercher tous les enfants directs d'une rangée de table, qu'ils soient 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 démo de travail basé sur le code que vous avez fourni sur la question.

de toute façon, vous ne nous avez pas dit Pourquoi vous avez besoin de cela et il pourrait y avoir une meilleure façon d'y parvenir. Par exemple, si vous souhaitez fournir les coins ronds, vous pouvez appliquer l'effet à l' table élément d'un emballage div.

0
répondu danijar 2013-04-11 17:15:37