web-dev-qa-db-fra.com

Comment appliquer text-align left dans la première colonne et text-align right dans les autres

J'ai un style de table, comment puis-je appliquer text-align:left; uniquement pour la première colonne et text-align:right; pour les autres colonnes?

Voici mon exemple de table:

http://jsfiddle.net/gianlucaguarini/hAv7P/

Pour le moment, l'alignement du texte est laissé pour toutes les colonnes.

csscss-tables
22
Koala7

Vous devez spécifier le CSS suivant:

.table td,
.table th
{
    text-align:left;
}

#right,
.table td + td,
.table th + th
{
    text-align:right;
}

Exemple ici: http://jsfiddle.net/mWeYM/

Vous pouvez en savoir plus sur le sélecteur CSS de frères et soeurs adjacents ici: http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors

20
keaukraine

Vous voudrez peut-être examiner la pseudo-classe :first-child ( Définition W3C ) - c'est exactement le genre de chose pour laquelle il a été conçu. Vous pourriez l'utiliser comme ceci:

.table td {
    text-align: right;
}

.table td:first-child {
    text-align: left;
}​

La pseudo-classe :first-child signifie que le sélecteur ne correspond qu'au premier <td> de chaque <tr>.

Exemple ici: http://jsfiddle.net/xv5Cn/1/

22
cloudfeet

Hey Manna, j'ai mis à jour ton violon, il suffit de suivre ce lien:

http://jsfiddle.net/hAv7P/9/

Tout ce que vous avez à faire est d’ajouter une classe à celle que vous voulez aligner puis d’ajouter css comme dans le violon

0
Sandeep Rao