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

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>wanna</td><td>want to</td></tr>
	<tr><td>ppl</td><td>people</td></tr>
	<tr><td>sup</td><td>what's up</td></tr>
	<tr><td>lol</td><td>laugh out loud</td></tr>
	<tr><td>btw</td><td>by the way</td></tr>
	<tr><td>tyy</td><td>thank you</td></tr>
</tbody></table>

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

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

table {
	width: 500px;
	max-width: 100%;
	border-spacing: 0;
}

td {
	padding: 2px;
}

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

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

3色以上指定したい場合

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

table {
	width: 500px;
	max-width: 100%;
	border-spacing: 0;
}

td {
	padding: 2px;
}

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

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

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

CSS テーブル,CSS

Posted by Yousuke.U