html - 将表格中的样式应用于 th 和 td 中的特定列

Question

我有一个表格，我希望能够将 CSS 中的特定样式分配给表格中的某些列：-

<table border="1">

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

</table>​

我希望能够只给前 2 个样式text-align: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而不是前两个。

请注意，这假设CSS3 在浏览器中的可用性。

如果你想兼容 IE8，你可以在 javascript 中轻松做到：

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 ：

​$('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;
}