今回は、擬似クラス :nth-child(even) を使って、table のセルの背景色を交互に定義する方法をメモしておきます。
INDEX
目次
- テーブルセルの背景色を1行ごと交互に定義する
- まとめ
テーブルセルの背景色を1行ごと交互に定義する
以下は bg-alternate クラスを table タグに定義すれば td 要素の背景色が交互に定義されるサンプルです。
[code]
.bg-alternate tr:nth-child(even) td {
background-color: lightgray;
}
.bg-alternate tr:nth-child(odd) td {
background-color: white;
}
[/code]
まとめ
Bootstrap 等の CSS フレームワークを使えば table もいい感じに仕上がりますが、ゼロベースで table の UI を設計する場合、セルを交互に色分けする事で視認性向上に役立ちます。
:nth-child(even), :nth-child(odd) の用途は、この使い方が一番多いのではないでしょうか。
この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
