[CSS] dlリストを使って一行ごとに背景色をつけたテーブルを作りたい

公開日:2018/09/29 更新日:2018/12/28

やりたいこと

たくさん行のあるテーブルは、一行一行の見分けがつきにくくなって読みにくくなってしまいます
そんなときの解決策の一つとして、一行ごとに背景色をつけるという方法があります
今回は、dlタグを使用したテーブルにレスポンシブも考慮した背景色のつけ方を検討しました

サンプルコード

.list_table,
.list_table > dt,
.list_table > dd {
    box-sizing: border-box;
}

.list_table {
    display: flex;
    flex-wrap: wrap;
    border-top: none;
}

.list_table > dt,
.list_table > dd {
    width: 100%;
    padding: 1em;
    margin: 0px;
}

.list_table > dt {
    background-color: #3388dd;
}

@media print, (min-width: 768px) {
    .list_table > dt {
        display: flex;
        align-items: center;
        width: 20%;
    }
    .list_table > dd {
        width: 80%;
        background-color: #3388dd;
    }
    .list_table > dd:nth-child(4n),
    .list_table > dt:nth-child(4n-1) {
        background-color: transparent;
    }
}

仕組み、解説、補足など

モバイル表示時はdtに設定された背景色だけが適用されるので、ごくシンプルな一行の色付けとなります
タブレットやPCでは、dt、ddに色をつけた上で、4の倍数番目のddと、4の倍数-1番目のdtの色を透過しています

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。