Sélecteur CSS pour sélectionner la première et deuxième cellules de tableau

Quelqu'un peut-il m'aider à comprendre ce que les sélecteurs j'ai besoin de changer la largeur de mes colonnes globalement sur mon tableau à deux colonnes?

À l'aide de cette, sera bien sûr de sélectionner toutes les cellules:

table td {
    width: 50px;
}

Ce que je veux, c'est ceci:

<table>
    <tr>
        <td style="width: 50px">data in first column</td>
        <td style="width: 180px">data in second column</td>
    </tr>
    <tr>
        <td style="width: 50px">more data in first column</td>
        <td style="width: 180px">more data in second column</td>
    </tr>
</table>

J'aimerais mettre de la largeur de la spécification dans une feuille de style, plutôt que de taper la largeur implicitement pour chaque balise. Ce sélecteur CSS sera permettez-moi de 50px de largeur et de 180px de manière appropriée?

InformationsquelleAutor Icemanind | 2013-03-09
  1. 19

    Yep. 

    td:first-child{
   width:50px;
}

td:nth-child(2){
   width: 180px;
}

    ou, comme suggéré par Brainslav s edit:

    td:nth-child(1) {
      width: 50px;}
td:nth-child(2) {
      width: 180px;}

    lien

    InformationsquelleAutor Nobita
  2. 3

    Essayez d'utiliser class noms dans votre balisage et l'utilisation colgroup. C'est de loin le moins de tracas puisque vous définissez la largeur que dans colgroup, et est compatible avec tous les navigateurs.

    Par exemple.

    <table>
    <colgroup>
        <col class="colOne" />
        <col class="colTwo" />
    </colgroup>
    <tr>
        <td>data in first column</td>
        <td>data in second column</td>
    </tr>
    <tr>
        <td>more data in first column</td>
        <td>more data in second column</td>
    </tr>
</table>

/* CSS */

.colOne{
    width: 50px;
}
.colTwo{
    width: 180px;
}

    Voir violon: http://jsfiddle.net/4ebnE/

    Une chose cependant, colgroup est obsolète en HTML5. Mais là encore, le HTML5 n'est pas normalisée, de sorte que vous pouvez prendre l'appel.

    Oh, et il est possible de faire sans CSS, si vous avez envie:

    <table>
    <colgroup>
        <col width="50"/>
        <col width="180" />
    </colgroup>
    <tr>
        <td>data in first column</td>
        <td>data in second column</td>
    </tr>
    <tr>
        <td>more data in first column</td>
        <td>more data in second column</td>
    </tr>
</table>
    • Super réponse! Encore mieux, colgroup n'est pas obsolète dans HTML5.
    InformationsquelleAutor Amy
  3. 0

    Je pense que votre meilleur pari serait d'utiliser css pseudo-sélecteurs:

    table tr td:first-child {
    width: 50px;
}
table tr td:last-child {
    width: 150px;
}
td {
    background: gray;
}

<table>
    <tr>
        <td>data in first column</td>
        <td>data in second column</td>
    </tr>
    <tr>
        <td>more data in first column</td>
        <td>more data in second column</td>
    </tr>
</table>

    Voici un exemple sur JSFiddle: http://jsfiddle.net/scottm28/gGXy6/11/

    Sinon, vous pouvez également utiliser CSS3 :nth-child() Sélecteur

    InformationsquelleAutor Scott