【HTML】テーブルを1行毎に色を変える【CSS】

FrontEnd

データ分析などで便利なHTMLタグはtableタグですよね。
10や100レコードなど多い場合はプログラムでループさせて表示している事が多いかと思います。
今まではこのループの処理にいまの行が偶数だったらclassを付けたり奇数だったらclassを外したりしてCSSで行ごとに色を変えたり試行錯誤(迷走)しながらこんにちまで生きてきました。
これはコードの可読性がさがってしまいストレス不可避でしたが、ひょんなことから解決策を見つけました。
フロントに特化したエンジニアであればもしかしたらすでに認知されているかと思いますが、普段バックエンドよりの自分からしたらこんな書き方ができるというのは目からうろこ状態でした。

:nth-child()(疑似クラス)

スポンサーリンク

コード

CSS

#css
    .data tr:nth-child(2n-1) td {
        background-color: #F0F8FF;
    }

HTML

データ
1
2
3
4

使用例(参考サイト引用)

調べてみたら思ったりよも書き方の幅が大きくて応用次第でかなりイケイケなコードになるんじゃないかという所感です。
子要素に対してなのでtableタグじゃなくてもliタグとかにも指定できて良いですね。

tr:nth-child(odd) 又は tr:nth-child(2n+1)

HTML テーブルの奇数行 (1, 3, 5, など) を表します。

tr:nth-child(even) または tr:nth-child(2n)

HTML テーブルの偶数行 (2, 4, 6, など) を表します。

参考サイト

:nth-child() - CSS: カスケーディングスタイルシート | MDN
:nth-child() は CSS の擬似クラスで、兄弟要素のグループの中での位置に基づいて選択します。

コメント

タイトルとURLをコピーしました