[UI] display:table-cellを使って横並びのレイアウトをする方法

html

 
おおおお
 
おおおおおおおおおおおおおおおおおおおおおおおおおおおおお
 
おおおお
 
おおおお

幅指定をする場合

おおおお

おおおおおおおおおおおおおおおおおおおおおおおおおおおおお

おおおお

おおおお

.row {
 display:table;
 width: 100%;
}
.row > div {
 display:table-cell;
 width: 25%;
 vertical-align:top;
 padding:.5em;
}

幅指定なしで均等幅にする場合

おおおお

おおおおおおおおおおおおおおおおおおおおおおおおおおおおお

おおおお

おおおお

.row {
 display:table;
 table-layout: fixed;
 width: 100%;
}
.row > div {
 display:table-cell;
 vertical-align:top;
 padding:.5em;
}

table-cellの隙間を作る場合

おおおお

おおおおおおおおおおおおおおおおおおおおおおおおおおおおお

おおおお

おおおお

.row {
 display:table;
 table-layout: fixed;
 border-spacing: 10px 0;
 border-collapse:separate;
 width: 100%;
}
.row > div {
 display:table-cell;
 vertical-align:top;
 padding:.5em;
}

使用上のポイント

• ie8+ブラウザ対応状況
• ○ 内容量に関係なく高さが揃う。
• ○ 均等幅、均等配置が簡単。
• × 行ごとにdisplay:tableを指定した要素で囲む必要がある。商品一覧のような流し込みには不向き。
• △ レスポンシブにはあまり向いていない？使い方次第？display:blockの指定で1列になる。
• border-spacingの指定できる値は1つ、または2つ。2つの場合[左右][上下]の順番。※paddingなどとは違う。

CSS対応状況

• CSS Table display