Selektor CSS do wybrania pierwszej i drugiej komórki tabeli

Question

Czy ktoś może mi pomóc określić, które selektory potrzebuję, aby zmienić szerokość kolumn na całym moim stole kolumnowym?

Używanie tego będzie oczywiście zaznaczyć wszystkie komórki:

table td { 
    width: 50px; 
} 

Co chcę to:

<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> 

Chciałbym umieścić specyfikację szerokość w arkuszu stylów, a następnie wpisując szerokość niejawnie dla każdego tagu. Jaki selektor CSS pozwoli mi ustawić odpowiednio szerokość 50px i 180px?

Answer 1

Tak.

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

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

albo, jak sugeruje edycji Brainslav za:

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

link

Answer 2

Spróbuj użyć class nazw w znacznikach i wykorzystując colgroup. Jest to zdecydowanie najmniej kłopotliwe, ponieważ definiujesz szerokość tylko w colgroup i jest kompatybilna z wieloma przeglądarkami.

Np.

<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; 
} 

See skrzypce: http://jsfiddle.net/4ebnE/

Jedną rzeczą, colgroup jest przestarzałe w HTML5. Ale znowu HTML5 nie jest jeszcze standaryzowany, więc możesz wykonać połączenie.

Aha, i jest to możliwe do zrobienia bez CSS, jeśli masz ochotę:

<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> 

Answer 3

Myślę, że najlepiej byłoby użyć CSS pseudo-selektorów:

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> 

Oto przykład na JSFiddle: http://jsfiddle.net/scottm28/gGXy6/11/

Alternatywnie, można również użyć CSS3 :nth-child() Selector