使用css自動將不同列樣式應用於表列

Question

在頁面中，我有許多HTML表格，其中有許多列。我需要對它們應用不同的風格。所有的列將有不同的寬度，但在表格中它們將是相同的，我的意思是所有表格的第一列將相同，第二列和所有列相同。

CSS是應用在表上，但不是在列上，有沒有一種方法，我只是添加CSS類，我可能沒有把它們應用在HTML代碼中，它們會自動應用。可能使用 僞列或其他方式？

Answer 1

如果你能使用支持CSS nth-child()瀏覽器，你可以使用：

tr td:nth-child(even) { 
    background-color: #ffa; 
} 

JS Fiddle demo。

在我使用:nth-child(even)避免造型的第一td元素（其中包含的行標題）上面的演示中，你可以，當然，包含行中的th元素標題（這很可能是更多的語義正確的），或者樣式的odd列（或oddtd元素），但不的:first-child，該:not()選擇可用：

tr td:nth-child(odd):not(:first-child) { 
    background-color: #ffa; 
} 

JS Fiddle demo。

如果你具有支持舊的瀏覽器，不支持:nth-child()僞類限制，您可以使用相鄰兄弟選擇（雖然這是少維護）：

td + td, /* styles the second td */ 
td + td + td + td { /* styles the fourth td */ 
    background-color: #ffa; 
} 

td + td + td { /* styles the third td */ 
    background-color: #fff; 
} 

JS Fiddle demo。

Thoug它會更容易些類（即使只提供給odd（或的even）樣式：

.even { /* styles the cells with the class of 'even' */ 
    background-color: #ffa; 
} 

.even + td { /* styles the cell that follows the cell with the 'even' class */ 
    background-color: #f90; 
} 

您也可以使用colgroup和col元素來定義類你列：

<table> 
    <colgroup> 
     <col class="first" /> 
     <col class="second" /> 
     <col class="third" /> 
     <col class="fourth" /> 
    </colgroup> 
    <thead> 
     <tr> 
      <th></th> 
      <th>Column one</th> 
      <th>Column two</th> 
      <th>Column three</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Row one</td> 
      <td>row one, cell one</td> 
      <td>row one, cell two</td> 
      <td>row one, cell three</td> 
     </tr> 
     <tr> 
      <td>Row two</td> 
      <td>row two, cell one</td> 
      <td>row two, cell two</td> 
      <td>row two, cell three</td> 
     </tr> 
    </tbody> 
</table> 

用下面的CSS作爲一個例子（注意這裏沒有理由不樣式其他col CL驢，我只是選擇了不要在這個演示）：

.second, .fourth { 
    background-color: #ffa; 
}​ 

JS Fiddle demo。

參考文獻：

• Adjacent-sibling (+) combinator。
• col。
• colgroup。
• :first-child。
• :not()。
• :not() compatibility, at Quirksmode。
• :nth-child()。
• :nth-child() compatibility, at Quirksmode。

Answer 2

您可以使用CSS3「第n」選擇器，但它不適用於舊版瀏覽器。 所以你最好的解決方案是在頁面加載後在javascript中應用更改（使用jQuery實例）。

$(function() { 
    $("table tr td:nth-child(n)").css('width', '100px'); 
}); 

，或者你可以添加一個類

$("table tr td:nth-child(n)").addClass("myWidth1"); 

，並在你的CSS

.myWidth1{ width: 100px } 

確認表選擇捕獲所有表。