テーブルで1行目や2行目の背景色を1行ごと、交互に変えるCSSを記載します。
CSSでtable 行の背景色を1行ごとに変える方法
CSSで行の背景色を1行ごとに色を変える場合は擬似クラス「nth-child」を使用します。擬似クラス「nth-child」は、前から何番目の要素や交互、一行ごとに要素を設定できるので便利です。
設定例
下記、テーブルで作成された表があるとして、
あああ | いいい | ううう |
えええ | おおお | かかか |
AAA | BBB | CCC |
DDD | EEE | FFF |
行の2番目、4番目の偶数行の背景を変更する場合は、下記のようにnth-childに2nを設定します。
nth-child(2n)
tr:nth-child(2n) { background:#fcfbdc; }
この設定で2番目と4番目の行の背景が変わります。
あああ | いいい | ううう |
えええ | おおお | かかか |
AAA | BBB | CCC |
DDD | EEE | FFF |
但し、見出しでthタグを使用している場合は2nだと1行目が変更されてしまいます。「2n+1」を設定します。
tr:nth-child(2n+1){ background:#fcfbdc; }
列1 | 列2 | 列3 |
---|---|---|
あああ | いいい | ううう |
えええ | おおお | かかか |
AAA | BBB | CCC |
DDD | EEE | FFF |
この「2n+1」の1はオフセット値となります。
nth-child疑似クラスは、もちろんtableだけではなく色々使えます。