【CSS】CSSを使ってテーブルの偶数行目だけ背景色を変える

HP制作 WEBサイト

css_table_nth-child

テーブルは行が増えるにつれ見にくくなるので、
偶数行目だけ背景色を変えてCSSで見やすくしてみます。

<table class="table">
<tr>
	<td>◯◯◯◯</td>
	<td>△△△△</td>
	<td>☆☆☆☆</td>
</tr>
<tr>
	<td>◯◯◯◯</td>
	<td>△△△△</td>
	<td>☆☆☆☆</td>
</tr>
<tr>
	<td>◯◯◯◯</td>
	<td>△△△△</td>
	<td>☆☆☆☆</td>
</tr>
<tr>
	<td>◯◯◯◯</td>
	<td>△△△△</td>
	<td>☆☆☆☆</td>
</tr>
</table>
.table, .table td, .table th {
	border-collapse: collapse;
	border: 1px solid #666;
}
.table td, .table th {
	padding: 10px;
}
.table tr:nth-child(even) td {
	background: #ededed; /* 偶数のみ */
}

css_border_even_sample01

見やすいですね。

マウスオーバーしたらセルの背景色を変える

.table td:hover, .table th:hover {
	background: #ededed;
}

css_border_even_sample02

カーソルを合わせたセルの色を変えることもできます。
(カーソルが見えませんが一番上の☆☆☆☆を指差しています)

HP制作 WEBサイト

関連記事