CSSでtable 行の背景色を1行ごとに変える方法

テーブルで1行目や2行目の背景色を1行ごと、交互に変えるCSSを記載します。

CSSでtable 行の背景色を1行ごとに変える方法

CSSで行の背景色を1行ごとに色を変える場合は擬似クラス「nth-child」を使用します。擬似クラス「nth-child」は、前から何番目の要素や交互、一行ごとに要素を設定できるので便利です。

設定例

下記、テーブルで作成された表があるとして、

行の2番目、4番目の偶数行の背景を変更する場合は、下記のようにnth-childに2nを設定します。
nth-child(2n)

tr:nth-child(2n) {
 background:#fcfbdc;
 }

この設定で2番目と4番目の行の背景が変わります。

但し、見出しでthタグを使用している場合は2nだと1行目が変更されてしまいます。「2n+1」を設定します。

tr:nth-child(2n+1){
 background:#fcfbdc;
 }

この「2n+1」の1はオフセット値となります。

nth-child疑似クラスは、もちろんtableだけではなく色々使えます。