tableの行の色を交互に変えるCSSの書き方

データを一覧表示させる際にテーブルを使うことは多いと思います。

しかしデータの表示項目が多いと目がちかちかして見にくくなってしまいます。

そんなときデータの行を1行1行色を変えると見やすくなります。

CSSで簡単にできるのでご紹介します。

tableの行の色を交互に変えるCSSの書き方

まずデータテーブルを用意しましょう。

ID 名前 性別 生年月日 好きな色 好きな食べ物
1 あいうえお 男性 2001/1/1 りんご
2 かきくけこ 女性 2002/2/2 みかん
3 さしすせそ 女性 2003/3/3 黄色 マグロ

こんな感じでしょうか。

3行くらいだとまだ見やすいですが、100行くらいあるとまじで目がちかちかします。(あれ?歳やでかな?)

 

このテーブルの行にCSSで色をつけようとすると通常は次のように書きます。

でもこれだと全ての td タグの色が変わってしまいます。

1行ごとに色を変えるには疑似クラスの nth-child() を使います。

行ごとに色を変えるので疑似クラスをあてるのは tr タグになります。

引数は、何番目の要素かを指定します。

上の例のように 2n+1 を指定すると奇数番目の要素になります。

結果は次のようになります。

ID 名前 性別 生年月日 好きな色 好きな食べ物
1 あいうえお 男性 2001/1/1 りんご
2 かきくけこ 女性 2002/2/2 みかん
3 さしすせそ 女性 2003/3/3 黄色 マグロ

trタグの1行目がヘッダー行になっているためデータエリアは偶数番目の色が変わっているように見えます。

ヘッダー行のセルはthタグを使っているので色が変わりません。

 

偶数番目の要素を指定する場合は、2n と書きます。

ちなみに 3 と数値だけを入れると「3番目の要素に」という意味になります。

まとめ

1行ごとに色を変えるには、nth-child() を使う。

td タグではなく tr タグを指定することで行全体の色を変えれる。

引数に 2n+1 と入れることで奇数行を指定できる。

偶数行の場合は 2n を指定する。

コロナの影響でみんな大変だから俺もなんかできること

僕は福井県に住んでいるのですが、戦時中に福井大空襲にあい、その直後に大震災にあってボロボロになった話をおばあちゃんに聞きました。

それでも復活することができ、不死鳥の町と言われるようになりました。

先人達には心から感謝し尊敬します。

リーマンショック、東日本大震災、コロナと数十年に一度と言われる被害が立て続けに起きていますが、僕たちは強いです。

今は苦しいかもしれませんがきっと復活できます。

僕は低学歴ですし小さな小さな粒でしかないですが、プログラミングに関しては必死に勉強し15年以上ごはんにありつけています。

プログラミングを勉強している人の役に立てるほどのスキルはあると思っています。

なので1人でもんもんと悩んでいる若手のエンジニア向けに質問を受け付けることにします。

自宅で待機されている間もパソコンとインターネットがあればプログラミングの勉強はできます。

  • PHP
  • SQL
  • HTML・CSS
  • jQuery

とは言ってもいきなり答えを聞いていたのではなかなか成長できないと思うのです。

なので質問の際には次のことをご連携ください。

  • 何をやりたいか
  • どんなことを調べたか、検索キーワードと参考にしたページのURL
  • 調べた結果どこが分からないか
  • できるなら試したコード

メッセージいはとりあえずTwitterにでもください。

質問はこちら

すぐに返事できないかもしれませんがご了承ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA