閉じる

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

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

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

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

設定例

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

あああいいいううう
えええおおおかかか
AAABBBCCC
DDDEEEFFF

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

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

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

あああいいいううう
えええおおおかかか
AAABBBCCC
DDDEEEFFF

 

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

tr:nth-child(2n+1){
 background:#fcfbdc;
 }
列1列2列3
あああいいいううう
えええおおおかかか
AAABBBCCC
DDDEEEFFF

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

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

ピックアップ記事

  1. 先日、Windows11の機能や無償アップグレードなどがMicrosoftから発表されました。…
  2. 2021年WEB制作やネットショップで利用できる補助金について2021年の補助金の公募が開始…
  3. Google Search Console(サーチコンソール)で、「パンくずリスト「WebサイトUR…
ページ上部へ戻る