閉じる

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

テーブルで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だけではなく色々使えます。

ピックアップ記事

  1. ahrefs
    SEOツール 「ahrefs(エイチレフス)」とは?ahrefs(エイチレフス)は、日本でも有名…
  2. reCAPTCHA
    ホームページを公開すると設置したメールフォームに海外からスパム投稿され大量の迷惑メールが届くことがあ…
  3. ビデオ会議で便利なのがWeb会議サービスです。無料で利用できるサービスもいくつかあります。「Skyp…
ページ上部へ戻る