2

テーブルがあり、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;ます。

4

3 に答える 3

4

標準的で直接的な解決策:

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

この表記の利点はth、最初の 2 つの代わりに、たとえば 4 番目と 6 番目に適用するように変更しやすいことです。

これは、ブラウザで 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');
}​​​​​​​​​​​​​​​​​​​​​​​​​​​​​);​
于 2012-09-28T10:53:32.350 に答える
0

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;
}
于 2012-09-28T11:01:20.357 に答える
0

これを行う

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

ライブデモhttp://tinkerbin.com/B5Zi88Pp

于 2012-09-28T10:55:16.827 に答える