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>

我希望能够只给出text-align:left;和剩余th = text-align:center;的第2个样式。

Answer 1

标准和直接的解决方案：

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

这种表示法的优点是可以很容易地将其更改为例如应用于第四和第六th而不是前两个。

请注意，这假设为the availability of CSS3 in the browser。

如果您想与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 Way

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

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

3 个答案: