Bộ chọn CSS để chọn các ô bảng đầu tiên và thứ hai

Question

Ai đó có thể giúp tôi tìm ra bộ chọn nào cần thay đổi chiều rộng của các cột trên toàn cầu trên bảng hai cột không?

Sử dụng này, tất nhiên sẽ chọn tất cả các ô:

table td { 
    width: 50px; 
} 

Những gì tôi muốn đây là:

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

Tôi muốn đặt đặc tả chiều rộng trong một style sheet chứ không phải sau đó gõ chiều rộng ngầm cho mỗi thẻ. Bộ chọn CSS nào sẽ cho phép tôi đặt chiều rộng 50px và 180px một cách thích hợp?

Answer 1

Đúng.

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

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

hay, theo đề nghị của chỉnh sửa Brainslav của:

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

link

Answer 2

Hãy thử sử dụng class tên trong đánh dấu của bạn và sử dụng colgroup. Đó là bởi đến nay các rắc rối ít nhất kể từ khi bạn xác định chiều rộng chỉ trong colgroup, và là tương thích trình duyệt chéo.

Ví dụ:

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

Xem fiddle: http://jsfiddle.net/4ebnE/

Một điều mặc dù, colgroup bị phản đối trong HTML5. Nhưng sau đó một lần nữa HTML5 chưa được chuẩn hóa, vì vậy bạn có thể thực hiện cuộc gọi.

Oh, và nó có thể làm mà không có bất kỳ CSS nếu bạn ưa thích:

<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

Tôi nghĩ rằng đặt cược tốt nhất của bạn sẽ được sử dụng css pseudo-selectors:

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> 

Dưới đây là một ví dụ về JSFiddle: http://jsfiddle.net/scottm28/gGXy6/11/

Hoặc, bạn cũng có thể sử dụng CSS3 :nth-child() Selector