Table HTML: définir la largeur de la deuxième colonne à l'aide de CSS

Puis-je définir la largeur de colonne pour tous, mais d'abord de la colonne à l'aide de CSS?

source d'informationauteur KalEl

  1. 16

    HTML tables n'ont pas vraiment de "colonnes" - lignes, juste avoir des premières cellules, au moins autant que le balisage est concerné. Cependant, vous pourriez faire quelque chose comme avec les sélecteurs CSS:

    Donné le balisage suivant:

    <table>
  <tr><td>foo</td><td>bar</td><td>bar 2</td></tr>
  <tr><td>foo</td><td>bar</td><td>bar 2</td></tr>
  <tr><td>foo</td><td>bar</td><td>bar 2</td></tr>
  <tr><td>foo</td><td>bar</td><td>bar 2</td></tr>
</table>

    CSS:

    table tr td             { width: 20em; }
table tr td:first-child { width: 10em; }

    Ce serait de régler la largeur de la première colonne "à 10em, et toutes les autres colonnes de 20em.

    Vous pourriez envisager de prise en charge du navigateur pour :first-child. L'alternative est l'ajout d'une classe à la première <td> dans tous les <tr> (il semble être soutenue par à peu près tous les principaux navigateurs autres qu'IE6).

  2. 5

    L'une de ces travaux:

    td:not(:first-child) {
    width: 20%;
}

    td:nth-child(n+2) {
    width: 20%;
}

    Les deux exemples travailler dans IE9+

    Démo

  3. 2

    À l'aide de CSS2.1, je ne suis pas au courant des éventuelles sélecteur de le faire.

    Cependant, CSS3 a un pas (que) du sélecteur, donc si vous donnez à votre première colonne de la classe, vous pouvez utiliser un sélecteur td:not(.your_class)