CSS | テーブルの行で交互に背景色を変えるサンプルコード

2021-12-192023-05-29CSS テーブル,CSS

CSSでテーブルの行毎の背景色を交互に色を変える良くあるパターンのデザイン方法を紹介しています。

また、交互ではなく3色以上の配色をしたい場合のサンプルコードも紹介しています。

テーブルの行で交互に色を変える

テーブルの行で交互に色を変えるCSSの動作サンプルとサンプルコードになります。

See the Pen CSS | Alternately change colors in Table by yochans (@yochans) on CodePen.

サンプル用にシンプルな table のHTML要素を設置しています。

<table>
	<tbody>
		<tr>
			<td>Apple</td>
			<td>100</td>
		</tr>
		<tr>
			<td>Banana</td>
			<td>100</td>
		</tr>
		<tr>
			<td>Pine</td>
			<td>100</td>
		</tr>
		<tr>
			<td>Peach</td>
			<td>100</td>
		</tr>
	</tbody>
</table>

tr 要素にCSSの疑似クラス :nth-child() を作成して引数には even と odd を指定します。
even はその要素の並びから奇数番目、odd は偶数番目を意味しています。

双方に backgroundプロパティで違う背景色を指定する事で、テーブル内の行が交互に背景色を変更するようになります。

table {
	width: 100%;
}

td {
	padding: 5px;
}

tr:nth-child(even) {
	background: #add8e6;
}

tr:nth-child(odd) {
	background: #e0ffff;
}

3色以上指定したい場合

背景色を交互の2色ではなく3色以上指定したい場合は、例えば3色であれば :nth-child() の引数に 3n+ 1、3n+ 2、3n+ 3を指定します。

table {
	width: 100%;
}

td {
	padding: 5px;
}

tr:nth-child(3n+1) {
	background: #87cefa;
}

tr:nth-child(3n+2) {
	background: #add8e6;
}

tr:nth-child(3n+3) {
	background: #e0ffff;
}