[ CSS ] display: table-cell って便利そう！

だるかぶ

サンダルでスーパーカブ乗りの『だるかぶ』です！
ご訪問ありがとうございます。ゆっくりしていってね。（本ページは広告を含みます。）

CSS の display: table-cell と言うプロパティーを最近知りまして、float を使わずにカラムレイアウト出来たり、縦方向の中央に要素を配置できたりして便利そうなのでサンプルを書いてみました！

https://codepen.io/darucub/pen/ZYWEWVV

どんな事が出来るのか？

HTML のソース

<dl>
    <dt>見出し</dt>
    <dd>内容</dd>
</dl>

CSS のソース

dl {
    display: table;
    width: 360px;
    border: 2px solid #ccc;
}
dt, dd {
    display: table-cell;
    padding: 0.5em 1em;
    vertical-align: middle;
}
dt {
    width: 20%;
    background-color: #eee;
}
dd {
    width: 80%;
}

上のようなコードで、次の様な表示になります。

対応ブラウザ

display:table-cell は、次のブラウザで利用出来るようです。

• Firefox 2 以降

• Safari 2 以降

• Opera 9 以降

• IE8 以降

他のブラウザについては調べていません。スミマセン…。

参考にさせてもらったページ

• CSS「display: table」と「display: table-cell」で出来ること | アイビーネットblog

ありがとうございます！

現場からは以上です。それでは、またッ！！！

だるかぶ

最後までお読みいただきありがとうございます！ スキ・コメント・シェア・フォローなどで応援いただけると『だるかぶ』のやる気がアップします！

記事内容の修正について 記載している内容は記事執筆時の情報です。 できるだけ最新情報を掲載するようにしていますが、情報が間違っている場合は「コメント」でご指摘いただけるとありがたいです。