HTML & CSS

レシピ

テーブル

テーブルのセルごとにスタイルを適用する

クラス属性を使わずに、擬似クラス「nth-child(3)」などを使って列や行にスタイルを適用する方法を解説します。

この記事のポイント

  • スタイルを適用したいセルをピンポイントで指定する
  • 擬似クラスを使って行・列ごとにスタイルを適用する

目次

特定のセルのみにスタイルを適用する

CSSで用意されている擬似クラスを使うと、テーブルにある特定のセルだけにピンポイントでスタイルを適用することができます。

表示例
表示例

3行目の「BBQ大会」を赤文字に、7行目の全セルを薄い文字色にしています。

コード例

<style>
table tr:nth-child(3) td:nth-child(2) {
	color: #96001c;
	background-color: #ffcfd8;
}
table tr:nth-child(7) td {
	color: #bbb;
}
</style>
<table>
	<tr>
		<th>ID</th>
		<th>イベント名</th>
		<th>定員</th>
		<th>開催日</th>
	</tr>
	<tr>
		<td>E080125</td>
		<td>Netflix鑑賞会</td>
		<td>10名</td>
		<td>18年8月20日</td>
	</tr>
	<tr>
		<td>E080126</td>
		<td>BBQ大会</td>
		<td>40名</td>
		<td>18年8月23日</td>
	</tr>
	<tr>
		<td>E080127</td>
		<td>読書会</td>
		<td>20名</td>
		<td>18年8月25日</td>
	</tr>
	<tr>
		<td>E080128</td>
		<td>プラネタリウム鑑賞会</td>
		<td>15名</td>
		<td>18年8月28日</td>
	</tr>
	<tr>
		<td>E080129</td>
		<td>第2回 Netflix鑑賞会</td>
		<td>10名</td>
		<td>18年8月30日</td>
	</tr>
	<tr>
		<td>E090130</td>
		<td>花火大会 (応募受付終了)</td>
		<td>20名</td>
		<td>18年9月7日</td>
	</tr>
</table>

CSSに記述したセレクタ「tr:nth-child(3) td:nth-child(2)」について、「tr:nth-child(3)」は3つ目のtr要素を指しています。
さらに「td:nth-child(2)」の部分で、2つ目のtd要素を指定することで、3行目の2つ目のtd要素に対してcolorプロパティbackground-colorプロパティを適用するセレクタとなっています。

その後のセレクタ「tr:nth-child(7) td」では、「tr:nth-child(7)」の部分で7つ目のtr要素を指し、続く「td」でtr要素の子孫要素にあたる全てのtd要素を指定しています。
結果として、7行目の全てのtd要素に対してcolorプロパティを適用しています。

特定の列にスタイルを適用する

続いて、行ではなく列の単位でスタイルを適用していきます。
列単位についても擬似クラスを使えば簡単に指定することができます。

特定の列だけスタイルを適用している例
特定の列だけスタイルを適用している例

コード例

<style>
table td:nth-child(2) {
	color: #e72053;
	font-weight: bold;
}
</style>
<table>
	<tr>
		<th>ID</th>
		<th>イベント名</th>
		<th>定員</th>
		<th>開催日</th>
	</tr>
	<tr>
		<td>E080125</td>
		<td>Netflix鑑賞会</td>
		<td>10名</td>
		<td>18年8月20日</td>
	</tr>
	<tr>
		<td>E080126</td>
		<td>BBQ大会</td>
		<td>40名</td>
		<td>18年8月23日</td>
	</tr>
	<tr>
		<td>E080127</td>
		<td>読書会</td>
		<td>20名</td>
		<td>18年8月25日</td>
	</tr>
	<tr>
		<td>E080128</td>
		<td>プラネタリウム鑑賞会</td>
		<td>15名</td>
		<td>18年8月28日</td>
	</tr>
	<tr>
		<td>E080129</td>
		<td>第2回 Netflix鑑賞会</td>
		<td>10名</td>
		<td>18年8月30日</td>
	</tr>
	<tr>
		<td>E090130</td>
		<td>花火大会 (応募受付終了)</td>
		<td>20名</td>
		<td>18年9月7日</td>
	</tr>
</table>

CSSに記述したセレクタ「td:nth-child(2)」は全ての行の中にある、2つの子孫要素であるtd要素を指定し、スタイルを適用しています。
1行目の「イベント名」はth要素なのでスタイルは適用されません。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。