CSS選擇器來選擇第一個和第二個表格單元格

Question

有人可以幫我計算出我需要哪些選擇器來更改我的兩列表格全局列的寬度？

利用這一點，當然會選擇所有單元格：

table td { 
    width: 50px; 
} 

我想是這樣的：

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

我希望把寬度規格在樣式表而不是打字每個標籤隱含的寬度。什麼CSS選擇器會讓我適當地設置50px寬度和180px？

Answer 1

是的。

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

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

，或者作爲建議的Brainslav的編輯：

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

link

Answer 2

嘗試在您的標記使用class名稱和利用colgroup。這是迄今爲止最簡單的方法，因爲您只在colgroup中定義寬度，並且是跨瀏覽器兼容的。

例如，

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

見琴：雖然http://jsfiddle.net/4ebnE/

一件事，colgroup在HTML5已經過時了。但是，HTML5還沒有標準化，所以你可以打電話。

哦，這是可能的，如果你看中了，沒有任何CSS做：

<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

我認爲最好的辦法是使用CSS僞選擇：

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> 

這裏有一個例子的jsfiddle：http://jsfiddle.net/scottm28/gGXy6/11/

另外，您也可以使用CSS3 :nth-child() Selector