display: table
テーブルレイアウトのアルゴリズムをHTML table要素以外で利用できるdisplay値です。等幅カラムや垂直方向の中央揃えなど、テーブルレイアウトの特性を非テーブル要素に適用できます。ただし現在ではFlexboxやGridの使用が推奨されます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.properties.display.inline-table | 1 | 12 | 3 | 1 | 18 | 1 |
| CSS プロパティ | ||||||
table | 1 | 12 | 1 | 1 | 18 | 1 |
table-caption | 1 | ≤15 | 1 | ≤4 | 18 | ≤3.2 |
table-cell | 1 | 12 | 1 | 1 | 18 | 1 |
table-column | 1 | 12 | 1 | 1 | 18 | 1 |
table-column-group | 1 | 12 | 1 | 1 | 18 | 1 |
table-footer-group | 1 | 12 | 1 | 1 | 18 | 1 |
table-header-group | 1 | 12 | 1 | 1 | 18 | 1 |
table-row | 1 | 12 | 1 | 1 | 18 | 1 |
table-row-group | 1 | 12 | 1 | 1 | 18 | 1 |
基本構文
CSS
.table { display: table; width: 100%; }
.row { display: table-row; }
.cell {
display: table-cell;
vertical-align: middle;
}ライブデモ
実務での使いどころ
-
レガシーブラウザ対応の等幅レイアウト
Flexboxがサポートされない環境で、display: table-cellとvertical-align: middleを使用して垂直中央揃えを実現します。
注意点
- テーブルレイアウトは暗黙的なボックス生成があり、構造が複雑になります。新規プロジェクトではFlexboxやGridの使用を推奨します。
アクセシビリティ
- display: tableはセマンティクスを変更しないため、データテーブルには必ず<table>要素を使用し、role属性でテーブルの意味を明示してください。