display: table-cell; とは？

CSSの display プロパティは、要素がどのように表示されるかを指定します。
その中でも display: table-cell; は、テーブルセルと同じように振る舞うブロック要素を指定するためのものです。

主な特徴

テーブルの振る舞い

display: table-cell; を指定すると、要素はテーブルセルのように振る舞います。
これにより、要素は通常のブロック要素が持つ一部の特性を無効にし、テーブルセルとして配置されます。

テーブル内の配置

このプロパティは、通常、テーブル内のセルとして使用されることを意味します。
このため、水平方向に隣接する他のセルと同じ行に配置され、垂直方向には他の行と同じ行になります。

.parent {
  display: table;
}

.child {
  display: table-cell;
  border: 1px solid #000;
}

<div class="parent">
  <div class="child">Cell 1</div>
  <div class="child">Cell 2</div>
  <div class="child">Cell 3</div>
</div>

この例では、.parent は display: table; を持ち、.child は display: table-cell; を持っています。
これにより、子要素はテーブルのセルとして配置され、通常のブロック要素が持つマージンやパディングの一部が無効になります。

用途

表形式のレイアウト

display: table-cell; は通常、表形式のレイアウトを構築する際に使用されます。
これにより、要素が柔軟な表形式のレイアウト内に組み込まれることができます。

等しい高さの列を作成

テーブルセルを使用すると、同じ行内の他のセルに合わせて高さが調整され、等しい高さの列を作成するのに便利です。

注意点

1. display: table-cell; を使用すると、要素がテーブルセルとして配置され、通常のブロック要素の振る舞いが変更されます。
   そのため、適切な文脈で使用する必要があります。
2. このプロパティはテーブルベースのレイアウトを作成するためのものであり、他のレイアウト方法が適している場面では避けるべきです。