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

テーブルは行が増えるにつれ見にくくなるので、
偶数行目だけ背景色を変えて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; /* 偶数のみ */
}

見やすいですね。

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

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

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