table CSS セルの指定 nth-child

特定セルの指定

nth-childを利用します。

.total_tableクラスのtableの特定セルにメダルアイコンを表示させる実装で利用しました🐱✨

    .total_table tr:nth-child(2) td:nth-child(1) {
        background-image: url('{{asset(./images/icon_1st.png')}}');
        background-repeat: no-repeat;
        background-position: left;
    }

tr:nth-child(2) td:nth-child(1) … 上から２行目の、左から１行目のセル
background-position: left; 背景画像(アイコン)を左寄せ

奇数、偶数行でセルをしま模様に指定

    /* 奇数行のスタイル */
    .total_table tr:nth-child(odd) , .total_table tr:nth-child(odd) {
        background-color:#f0f0f0;
    }
    /* 偶数行のスタイル */
    .total_table tr:nth-child(even), .total_table tr:nth-child(even) {
        background-color:white;
    }