More than 5 years have passed since last update.

CSSのdisplay table と table-cell で横幅を複数カラム分割する

Last updated at 2014-11-28Posted at 2014-11-24

displayのtableとtable-cellを使うと、スマホでありがちな2カラムや3カラムのような均等分割が簡単にできます。

tableとtable-cellで横幅を複数カラム分割

tableとtable-cellを指定するとそれぞれ、タグのtableとtdとして扱ってくれるようです。

2カラムにしたいHTML

<div class="items">
  <p class="item item--left">aaaa</p>
  <p class="item item--right">bbbb</p>
</div>

tableとtable-cellを指定

.items {
  display: table;
  width: 100%;
}
.item {
  display: table-cell;
}
.item--left {
  background: red;
}
.item--right {
  background: blue;
}

tableを指定している、外側のitemsクラスにwidthの100%を指定すると、最大幅に広がった形で上手く2カラムに均等分割されます。

横幅が分割された表示です。

displayのtable-cellをあまり使ったことがなかったので試してみました。
bootstrapなどのgridレイアウトクラスを使うよりもこちらのほうが楽な場合がありますねー(☝ ՞ਊ ՞)

テーブルの中央表示をする場合は、vertical-alignが有効です。

table-cellの縦中央揃えを指定

.item {
  vertical-align: middle;
}