CSS3: テーブルセルの背景色を1行ごと交互に定義する

今回は、擬似クラス :nth-child(even) を使って、table のセルの背景色を交互に定義する方法をメモしておきます。

目次

  • テーブルセルの背景色を1行ごと交互に定義する
  • まとめ

テーブルセルの背景色を1行ごと交互に定義する

以下は bg-alternate クラスを table タグに定義すれば td 要素の背景色が交互に定義されるサンプルです。

.bg-alternate tr:nth-child(even) td {
    background-color: lightgray;
}
.bg-alternate tr:nth-child(odd) td {
    background-color: white;
}

まとめ

Bootstrap 等の CSS フレームワークを使えば table もいい感じに仕上がりますが、ゼロベースで table の UI を設計する場合、セルを交互に色分けする事で視認性向上に役立ちます。
:nth-child(even), :nth-child(odd) の用途は、この使い方が一番多いのではないでしょうか。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents