特定の列の<td>または<th>だけにスタイルを

質問

かけたいということがあります。

例えば、
----------------------------------------------------------
<style type="text/css">
.tab1 th,
.tab1 td {
font-weight:normal;
text-align:center;
background:#fee;
}
.tab1 .row2 th { /* ----------------(1) */
background:#fff;
}
.tab1 .col2 th { /* ----------------(2) */
background:#ffff;
}
</style>

<table class="tab1">
<col class="col1">
<col class="col2">
<col class="col3">
<tr class="row1">
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr class="row2">
<th>4</th>
<td>5</td>
<td>6</td>
</tr>
<tr class="row3">
<th>7</th>
<td>8</td>
<td>9</td>
</tr>
<table>
----------------------------------------------------------

だと、

1 2 3
4 5 6
7 8 9

の中の「4」は(1)により背景が白くなります。
しかし、(2)のようにしても「2」の背景は白くなりません。

<col>ってそういうものなのでしょうか？
<td>または<th>にidをつけてスタイルをかけるしかないのでしょうか？

よろしくお願いします。

回答No.1

yambejp · ベストアンサー

冷静に考えればわかりますが、

＞.tab1 .col2 th

というのはtab1クラスの中のcol2クラスの中のthタグを設定していますね
col2クラスはcolタグなので空要素です。thを子要素としてもってません。

＞<td>または<th>にidをつけて

idよりはclassで処理する方がよいかもしれませんね

お礼

ありがとうございます！

確かに、冷静になれば、<th>は<col>の子ではないので、その通りですね。

そう分かると、対象となるセルにidかclassを振る、というやり方しかなさそうです。

ありがとうございました。