CSS Tableの特定のセルだけ色を変えたい

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;
}

特定のセルの色がピンク色に変わりましたね。

そういう技法があることは頭の中に入れておいてくださいね。

メモメモ…

では、また!

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Leonard-Blogをもっと見る

今すぐ購読し、続きを読んで、すべてのアーカイブにアクセスしましょう。

続きを読む