[Résolu] Stylisation d'une colonne d'un tableau

j'ai un soucis étrange ^^

J'ai un tableau extrêmement simple à deux colonnes.
Le texte de la première colonne doit être aligné à gauche, et celui de la 2e doit être centré.
Pour cela, j'utilise les éléments html colgroup et col

Voici le code html :

<table>
   <colgroup>
      <col class="col1">
      <col class="col2">
   </colgroup>
   <tr><th>Cuvées </th><th>Prix </th></tr>
   <tr><td>Cuvée 1</td><td> 8,00</td></tr>
   <tr><td>Cuvée 2</td><td>10,00</td></tr>
   <tr><td>Cuvée 3</td><td>11,00</td></tr>
   <tr><td>Cuvée 4</td><td>11,00</td></tr>
</table>

En CSS, ceci devrait suffire :

.col1 { text-align: left }
.col2 { text-align: center }

Mais chez moi ça ne marche pas.
J'ai épluché tout 23 fois (sans exagérer) avec Firebug, en me disant que le tableau héritait d'une classe plus haut, de mon framework etc...
Et bien ça reste incompréhensible !

Dans ma recherche, une réflexion philosophique est même née :
- l'élément <col> est obligatoirement un enfant de l'élément <table>
- l'élément <col> n'est par contre jamais un parent des éléments <tr>, <th> ou <td>
- aussi, une règle CSS du genre "col td {}" est invalide
- si une règle globale pour le tableau comme celle-ci existe : "table td { color: red !important }", comment puis-je mettre en bleu le contenu de la colonne via le sélecteur col ?


Bref... pour les experts défricheurs qui voudraient me filer un coup de pouce avec leur Firebug ou équivalent, c'est par ici : http://www.jldenois.com/fr/tarifs

Merci d'avance !
Modifié par Spheerys (07 Jun 2013 - 20:18)

jb_gfx a écrit :


Ou simplement :

td:nth-child(2) {
    text-align: center;
}

ou encore mieux pour ne pas priver les vieux navigateurs

td+td {text-align:center}
/* marche aussi */
td:first-child+td {text-align:center} /* pour ne cibler que la deuxième colonne quel que soit le nombre de colonnes */