CSS Tableの列だけ色を変えたい
2024年3月21日
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 tbody tr:nth-child(1){
background:#EFEFEF;
}
「tbody」の部分の1行目に薄いグレーの背景色が入りました。
「:nth-child(1)」これは1行目だけの設定です。
行を入れるなら、「tr:nth-child(n)」という風に記述します。
「th:nth-child(n)」これを記述しても絶対に反映されません。
※セルに色を入れたいときはまた別の日に説明しますね。
でも、列に色を入れたいときどうしたらええんか？
table td:nth-of-type(2){
background:#EFEFEF;
}
2列目に薄いグレーの背景色が入りました。
列を入れるなら、「td:nth-of-type(n)」という風に記述します。
「tr:nth-of-type(n)」これを記述しても絶対に反映されません。
これでやっとスッキリしました。
メモメモ…
では、また！
- Leonardo
- 転職したほうがいい？～Part.2～ 2024年12月19日
- 転職したほうがいい？ 2024年12月18日
- オリジナルリセットスタイル構築中 2024年12月17日
- 今日は家族のクリスマスプレゼント～Part.3～ 2024年12月16日
- 今日は家族のクリスマスプレゼント～Part.2～ 2024年12月15日