【CSS入門】tableとtable-cellで要素を横並びさせよう

この記事ではCSSのdisplayプロパティの値である、tableとtable-cellをセットで紹介します。

Flexboxの登場により使う機会がほとんど無くなりましたが、場合によってはまだまだ使う機会もあると思いますのでしっかりと理解しておきましょう（inline・block・inline-block・none・flexについては下記の記事をお読みください）。

tableとtable-cell

tableとtable-cellはセットで使います。

親要素にtableを指定することで「表（table）」になり、子要素にtable-cellを指定することでtableの「セル（td）」と同じ扱いにすることができます。そのため子要素の高さを揃えて横並びにできたり、子要素内の上下の位置を揃えることが可能になります。

marginが効かないので、横並びにした要素と要素の感覚を調整することができません。

子要素を横並びに

まずは、横並びの例を見てみましょう。

HTML

<div class="parent">
  <div class="child">BOX-ABOX-A</div>
  <div class="child">BOX-BBOX-BBOX-BBOX-BBOX-BBOX-B</div>
  <div class="child">BOX-C</div>
</div>

CSS

.parent{
  display: table; /* table化 */
  width: 100%;
  height: 300px;
}

.child{
  display: table-cell; /* td化 */
}

子要素の幅を均等にして横並びに

上の例では子要素の横幅がバラバラですが、サイズを均等にしたいときは、親要素にtable-layout:fixed;を指定するだけでOKです。

子要素内の上下の位置を揃えたい場合は、子要素にvertical-align:middle;を指定します。

CSS

.parent{
  display: table;
  table-layout: fixed; /* 子要素のサイズを均等に */
  width: 100%;
  height: 300px;
}

.BOX-A,.BOX-B,.BOX-C{
  display: table-cell;
  vertical-align: middle; /* 縦位置の指定 */
}

まとめ

tableとtable-cellでやりたいことがほぼ出来てしまうFlexboxがよく使われるようになっている現在では、tableとtable-cellは積極的に使わなくても良いです。ただ、もしかしたらバグなどでFlexboxを使えない状況があるかもしれません。

そういうときには、table・table-cellが活躍しますので、一応使えるようはにしておきましょう。

CSS関係の記事は他にも書いているので、宜しければそちらもチェックしてみてください。