ミギムキ

[CSS] 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; } }

仕組み、解説、補足など

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

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

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