[CSS] レスポンシブな、入れ子テーブルを定義リスト（dldtdd）で組む

なんでテーブルじゃなく定義リスト（dldtdd）？

正直どちらでも良いと思います。個人的に定義リストのが書きやすいからというだけの理由です（汗）

一応、HTML Documnet的には

テーブル=>表
定義リスト=>定義する用語とその用語の説明

ということなので、表示させたい内容で決めるのが良いと思います。

今回の例題の「スマホのスペック表」だと、テーブルのほうがHTML Documentとしては正しいかもしれません。

ただ、

1. HTMLコード的には定義リストのがスッキリする
2. PHPやらRubyやらで表示をさせる時も複雑なコードにならない

ということで、今回は定義リストで組んでみました。table in tableだと、HTMLコードも大変なことになりますので。。。

とりあえず完成品

先に、こんな感じになるよーという完成品の画像を貼っておきます。

HTML

<dl class="dl-multi-table">
    <dt>メーカー</dt>
    <dd>Apple</dd>
    <dt>CPU</dt>
    <dd>
       <dl class="spce-table">
            <dt>プロセッサ名</dt>
            <dd>Apple A11</dd>
            <dt>コア数</dt>
            <dd>4</dd>
            <dt>コアクロック</dt>
            <dd>不明</dd>
            <dt>bit</dt>
            <dd>64bit</dd>
        </dl>
    </dd>
    <dt>メモリ</dt>
    <dd>1GB, 2GB, 4GB</dd>
</dl>

CSS

.dl-multi-table{width: 100%;}
.dl-multi-table dt, .dl-multi-table dd{padding: 8px 0; border-top: 1px solid #EEE;}
.dl-multi-table dt{width: 40%; float: left;}
.dl-multi-table dd{width: 60%; margin-left: 40%;}

.dl-multi-table dl{margin: -8px 0;}
.dl-multi-table dd dl dt{font-weight: normal; color: #999;}

.dl-multi-table dd dl dt:first-child, .dl-multi-table dd dl dd:nth-child(2){border-top: none;}

解説

dtのみをfloatさせて横並びに

まずは、テーブル風に横並びにしたいので、dtのみをfloatさせて、ddの左にdtの横幅と同じだけのmarginを設定します。

.dl-multi-table dt{width: 40%; float: left;}
.dl-multi-table dd{width: 60%; margin-left: 40%;}

これだけで、入れ子になった定義リストがぐっとテーブルっぽくなります。

borderを入れてよりテーブルっぽく

次に、罫線を入れてテーブルっぽくしていきます。

.dl-multi-table dt, .dl-multi-table dd{padding: 8px 0; border-top: 1px solid #EEE;}

ここまでで、だいたいはOKなんですが、罫線やpaddingが重なったりしてレイアウトがやや崩れるので調整します。

marginやborderを微調整

まずは、ddと入れ子になったdlの中のdtとddにpaddingがかかって2重になってしまうので、マイナスmarginを入れて打ち消します。

.dl-multi-table dl{margin: -8px 0;}

これでpadding周りは綺麗になりました。

次に、罫線の重複に対応します。

.dl-multi-table dd dl dt:first-child, .dl-multi-table dd dl dd:nth-child(2){border-top: none;}

これで完成です。

さくっと綺麗なレスポンシブ対応テーブルが定義リストで出来ました。

カラーリングや罫線の太さなどを変えれば、もっと綺麗なテーブルになりそうですね。