在表中的th和td

Question

我有一個表中的特定列應用的風格，我希望能夠以CSS中指定特定的樣式某些列在表中： -

`

<tr> 
<th>Header 1</th> 
<th>Header 2</th> 
<th>Header 3</th> 
<th>Header 4</th> 
<th>Header 5</th> 
</tr> 
<tr> 
<td>row 1, cell 1</td> 
<td>row 1, cell 2</td> 
<td>row 1, cell 3</td> 
<td>row 1, cell 4</td> 
<td>row 1, cell 5</td> 
</tr> 
<tr> 
<td>row 2, cell 1</td> 
<td>row 2, cell 2</td> 
<td>row 2, cell 3</td> 
<td>row 2, cell 4</td> 
<td>row 2, cell 5</td> 
</tr> 

`

我希望能夠給第2個只有文本對齊的樣式：left;剩下的th = text-align：center;

Answer 1

標準和直接的解決方案：

th { 
    text-align:center;  
} 
tr th:nth-child(1), tr th:nth-child(2) { 
    text-align:left; 
}​ 

，這種表示方法的優點是很容易改變它例如適用於第四和第六th，而不是第2位。

請注意，這假設the availability of CSS3 in the browser。

var ths = document.getElementsByTagName('th'); // replace document by your table if necessary  
for (var i=2; i<ths.length; i++) ths[i].style.textAlign="center"; 

或使用jQuery：

如果你想與IE8兼容，你可能很容易在JavaScript做

​$('th').each(function(){ 
    if ($(this).index()>=2) $(this).css('text-align', 'center'); 
}​​​​​​​​​​​​​​​​​​​​​​​​​​​​​);​ 

Answer 2

做這個

th:first-child, th:first-child + th{ 
     text-align:left; 
     } 
th + th + th{ 
     text-align:center; 
     } 

現場演示http://tinkerbin.com/B5Zi88Pp

Answer 3

CSS3方式

th { 
text-align:center; 
} 
th:nth-child(0), th:nth-child(1) { text-align:left; }​ 

CSS2路

th{ 
text-align:center; 
} 
th:first-child, th:first-child + th{ 
text-align:left; 
}