display: table

概要

テーブルレイアウトのアルゴリズムをHTML table要素以外で利用できるdisplay値です。等幅カラムや垂直方向の中央揃えなど、テーブルレイアウトの特性を非テーブル要素に適用できます。ただし現在ではFlexboxやGridの使用が推奨されます。

対応ブラウザ

基本構文

.table { display: table; width: 100%; }
.row { display: table-row; }
.cell {
  display: table-cell;
  vertical-align: middle;
}

実務での使いどころ

• レガシーブラウザ対応の等幅レイアウト

  Flexboxがサポートされない環境で、display: table-cellとvertical-align: middleを使用して垂直中央揃えを実現します。

注意点

アクセシビリティ

• display: tableはセマンティクスを変更しないため、データテーブルには必ず<table>要素を使用し、role属性でテーブルの意味を明示してください。

参考リンク

• MDN Web Docs — display: table
• Can I use — display: table