2023.12.08

「display:table-cell;」について

display: table-cell; とは？

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

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

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

CSSの例文.parent {
  display: table;
}
 
.child {
  display: table-cell;
  border: 1px solid #000;
}

CSSの例文
1 2 3 4 5 6 7 8	`.parent {` `display:` `table;` `}` `.child {` `display:` `table-cell;` `border:` `1px` `solid` `#000;` `}`

HTMLの例文<div class="parent">
  <div class="child">Cell 1</div>
  <div class="child">Cell 2</div>
  <div class="child">Cell 3</div>
</div>

HTMLの例文
1 2 3 4 5	`<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; は通常、表形式のレイアウトを構築する際に使用されます。
これにより、要素が柔軟な表形式のレイアウト内に組み込まれることができます。

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

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