【CSS】display: table系のプロパティをまとめておさらい

display: table 系のプロパティはテーブルレイアウトを実現するために使われますが、よく忘れるのでそれぞれのプロパティの役割を簡単にまとめました。

display: table;

HTMLの<table>要素と同じように動作します。これは、ブロックレベルボックスを定義します。

display: table-row-group;

これらの要素はHTMLの<tbody>要素のように動作します。

display: table-header-group;

これらの要素はHTMLの<thead>要素のように動作します。

display: table-footer-group;

これらの要素はHTMLの<tfoot>要素のように動作します。

display: table-row;

これらの要素はHTMLの<tr>要素のように動作します。

display: table-cell;

これらの要素はHTMLの<td>要素のように動作します。

display: table-column-group;

これらの要素はHTMLの<colgroup>要素のように動作します。

display: table-column;

これらの要素はHTMLの<col>要素のように動作します。

display: table-caption;

これらの要素はHTMLの<caption>要素のように動作します。