CSS Tableの特定のセルだけ色を変えたい
2024年3月22日
3月半分が過ぎるころ、気温も徐々に上がってきたり下がってきたり…
晴れたり雨降ったりの繰り返しの日々が続いてますが…
青少年会館の桜の木の花を眺めるようになりました。
まだまだ桜の花満開は先になるんやろうなぁ…
話変わりますが…
CSS Tableの列だけ色を変えたい
WebページにTableの設定をするときに、最後の列だけは「左寄せ」にしたいとか…
最初の列と真ん中の列は「中央揃え」にしたいとか…
そういうデザインをしたいときありますよね。
こっちはいつも、
「:nth-child」とか「:nth-of-type」とか使いますが…
なぜか、列だけ表示されなかったんですね…
行だけはちゃんと設定すれば表示をされるんですが…
いろんなサイトをググったら、こっちの使い方のミスでした。
忘備録としてここに記載しておきます。
<table>
<thead>
<tr>
<th>1列目</th>
<th>2列目</th>
<th>3列目</th>
<th>4列目</th>
</tr>
</thead>
<tbody>
<tr>
<td>1行目タイトル</td>
<td>1行目テキスト</td>
<td>1行目サンプルテキスト</td>
<td>1行目テキストテキストテキストテキスト</td>
</tr>
<tr>
<td>2行目タイトル</td>
<td>2行目テキスト</td>
<td>2行目サンプルテキスト</td>
<td>2行目テキストテキストテキストテキスト</td>
</tr>
<tr>
<td>3行目タイトル</td>
<td>3行目テキスト</td>
<td>3行目サンプルテキスト</td>
<td>3行目テキストテキストテキストテキスト</td>
</tr>
<tr>
<td>4行目タイトル</td>
<td>4行目テキスト</td>
<td>4行目サンプルテキスト</td>
<td>4行目テキストテキストテキストテキスト</td>
</tr>
</tbody>
</table>
table{
border:1px solid #666;
border-collapse:collapse;
margin:0 auto;
padding:0;
}
table th,
table td{
border:1px solid #666;
padding:10px;
}
ここまでは基本の設定はできてますよね。
では次に、特定のセルだけ背景の色を変えたいときのCSSはどうするんでしょうか?
table tr:nth-child(1) td:nth-of-type(2){
background: #FFC0CB;
}
特定のセルの色がピンク色に変わりましたね。
そういう技法があることは頭の中に入れておいてくださいね。
メモメモ…
では、また!