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

スポンサードリンク

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

どんな事が出来るのか?

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%;
}

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

table-cell

対応ブラウザ

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

  • Firefox 2 以降
  • Safari 2 以降
  • Opera 9 以降
  • IE8 以降

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

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

ありがとうございます!

スポンサードリンク

この記事が気に入ったら、ぜひシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。