ミギムキ

[CSS] dlリストをdtとddの高さが揃ったテーブル形式で表示したい

サンプルコード

.list_table, .list_table > dt, .list_table > dd { box-sizing: border-box; } .list_table > dt, .list_table > dd { padding: 1em; margin: 0px; } .list_table > dt { background-color: #3388dd; color: #fff; } .list_table > dd { background-color: #fff; } @media screen and (max-width: 767px) { .list_table > dt, .list_table > dd { text-align: center; } .list_table > dd > ul { text-align: left; } } @media print, (min-width: 768px) { .list_table { display: flex; flex-wrap: wrap; border-bottom: 1px solid #ddd; } .list_table > dt, .list_table > dd { display: flex; flex-direction: column; justify-content: center; border-top: 1px solid #ddd; } .list_table > dt { width: 20%; } .list_table > dd { width: 80%; border-right: 1px solid #ddd; } }
スポンサー広告

仕組み、解説、補足など

変更履歴