display: table を使って要素を表組みのように均等配置する
公開日：2014年9月4日
最終更新日：2019年4月6日
CSSのプロパティ「display: table」を指定すると、テーブル構造で要素が配置されます。floatプロパティのようなpaddingやboderの計算に気を使う必要もなく、すべてのカラムは高さが揃えられてカラム落ちしないレイアウトを実現できます。
メリットの多いプロパティですが、注意点としてはIE7以下で使用できないことがあげられます。
また、セルを結合するcolspan属性やrowspan属性に相当する指定はできません。
メニューに使う
ul要素に「display: table;」を指定し、li要素に「display: table-cell;」を指定します。
table-cellは、td要素のような扱いになります。
なお、「display: table-row;」というtr要素のような扱いになる値も用意されています。
以下は表示例です。
HTMLとCSSのコードは以下になります。
table要素ですので、縦方向の位置はvertical-alignプロパティで指定できます。
ボーダーはすべての幅が1pxになるように調整しています。
|
1 2 3 4 5 6 |
<ul class="tips-table-ul"> <li><a href="#">ホーム</a></li> <li><a href="#">製品紹介</a></li> <li><a href="#">会社概要</a></li> <li><a href="#">お問い合わせ</a></li> </ul> |
|
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 |
.tips-table-ul { display: table; border-top: 1px solid #999; border-bottom: 1px solid #999; } .tips-table-ul li { display: table-cell; width: 120px; height: 40px; border-left: 1px solid #999; background-color: #cc9; text-align: center; vertical-align: middle; } .tips-table-ul li:last-child { border-right: 1px solid #999; } .tips-table-ul a { display: table-cell; width: 120px; height: 40px; vertical-align: middle; } .tips-table-ul a:hover { background-color: #bb8; } |
コンテンツの段組みに使う
display: table は、高さが決まっていないコンテンツの段組みにもよく使われます。
以下は表示例です。最も高い要素にカラムの高さが揃えらえています。
あいうえお
あいうえお
かきくけこ
あいうえお
かきくけこ
さしすせそ
あいうえお
かきくけこ
さしすせそ
たちつてと
HTMLとCSSのコードは以下になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="tips-table-div"> <div class="table-element"> <p>あいうえお</p> </div> <div class="table-element"> <p>あいうえお<br /> かきくけこ</p> </div> <div class="table-element"> <p>あいうえお<br /> かきくけこ</p> <p>さしすせそ</p> </div> <div class="table-element"> <p>あいうえお<br /> かきくけこ</p> <p>さしすせそ<br /> たちつてと</p> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.tips-table-div { display: table; width: 400px; } .table-element { display: table-cell; width: 25%; padding: 0.5em; border: 1px solid #999; background-color: #9c9; } |
スポンサーリンク
