dt dd を使って複数行の表組みをして、更にdt内を上下中央揃えにするのは、ネット上で情報が無かった為、試行錯誤の末、見つけ出しました。
- 大阪南法律事務所
- 大阪府河内長野市の河内長野駅前にある、大阪南法律事務所の公式ホームページ。女性弁護士も在籍しています。南大阪で弁護士をお探しなら、当事務所へ。
- あかつき建築設計
- 兵庫県姫路市にある一級建築事務所、あかつき建築設計の公式ホームページ。姫路市のみならず、加古 川・高砂・たつの・相生など近隣の市の工事を請け負っています。一戸建て・リフォーム・リノベーションまで、お客様のご依頼にお応え致します。相見積もり 歓迎。まずはお問い合わせ下さい。
HTMLコード
以下がHTMLコードです。複数行の場合は、dlを、設定したい行数分繰り返すのがミソです。
1 2 3 4 5 6 7 8 9 10 |
<div class="table"> <dl> <dt><a href="http://osakaminami-law.com/">大阪南法律事務所</a></dt> <dd><p>大阪府河内長野市の河内長野駅前にある、大阪南法律事務所の公式ホームページ。女性弁護士も在籍しています。南大阪で弁護士をお探しなら、当事務所へ。</p></dd> </dl> <dl> <dt><a href="http://akatsuki.hyogo.jp/">あかつき建築設計</a></dt> <dd><p>兵庫県姫路市にある一級建築事務所、あかつき建築設計の公式ホームページ。姫路市のみならず、加古 川・高砂・たつの・相生など近隣の市の工事を請け負っています。一戸建て・リフォーム・リノベーションまで、お客様のご依頼にお応え致します。相見積もり 歓迎。まずはお問い合わせ下さい。</p></dd> </dl> </div> |
CSSのコード
レスポンシブに対応出来るよう、スマホ用も併記しておきます。CSSコードでは、display要素に、table と table-cell を使うのがコツです。これを使えば、 vertical-align が使えるようになります。
PC用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
.table dl,.table dt,.table dd { margin: 0; } .table dl { display:table; background: #F2F2F2; border: 1px solid #ccc; border-style: none solid none solid; width:99%; } .table dl:last-child { border-style:none solid solid solid; } .table dt { font-weight:bold; vertical-align:middle; display:table-cell; padding:3px 0; min-height:1.5em; text-align: center; border-top: 1px solid #ccc; width: 200px; } .table dd { display:table-cell; min-height:1.5em; background: #fff; border-left: 1px solid #ccc; border-top: 1px solid #ccc; padding:5px 0 10px 5px; } |
スマホ用
PC用で設定していた、widthとdisplayを初期化すれば、横並びから縦並びに戻すことが出来ます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.table dd{ border-left:none; margin-left:auto; } .table dt{ padding-left:5px; text-align:left; width: auto; } .table dl{ width:auto; } .table dt,.table dd,.table dl{ display:block; } |