ITコラム

Agenda Calendar Appointment Planner Schedule Concept

ITコラム

2017.05.09

CSS【 display 】3～table

displayプロパティでdisplay: tableと指定して、その中の子要素に display: table-cell を指定すると、table要素と同じように表示することができます。
今回は、displayプロパティでdisplay: tableを指定した場合のサンプル表示などを紹介したいと思います。

displayプロパティについては、以下のページもご参照下さい。
CSS【 display 】1 ～要素の表示形式を指定するdisplayプロパティ
 CSS【 display 】2 ～ list-item
CSS【 display 】3 ～ table（本ページ）

1. displayプロパティの値

テーブル関連のdisplayプロパティの値は、次の通りです。

table	要素はtable要素と同じ性質になる
table-cell	要素はテーブルのセルとなり、td要素と同じ性質になる
table-row	要素はtr要素と同じ性質になる
table-header-group	要素はthead要素と同じ性質になる
table-row-group	要素はtbody要素と同じ性質になる
table-footer-group	要素はtfoot要素と同じ性質になる
table-column-group	要素はcolgroup要素と同じ性質になる
table-column	要素はcol要素と同じ性質になる
table-caption	要素はcaption要素と同じ性質になる
inline-table	要素はtable要素と同じ性質で、インラインの並び方になる

　
displayプロパティの値は、継承されません。
また、displayプロパティは、全ての要素で使用できます。

▲目次へ戻る

2. display:table

displayプロパティを使ってテーブルを表示させたい場合は、まず、親要素に display: table を指定します。
中の子要素をテーブルセルとして指定していくので、先に親要素を指定することは必須です。

そして、親要素に display: table と指定しても、それだけではテーブルを表示することはできません。
子要素に display: table-cell を指定してはじめてテーブルらしい形となります。

▲目次へ戻る

3. display:table-cell

親要素に display: table を指定した上で、子要素に display: table-cell を指定すると、テーブルセルとなります。

div要素に display: table を指定し、span要素に display: table-cell を指定すると、次のように表示されます。

セル１
セル２
セ
ル
３

　
ソースは次の通りです。

（CSS）
div#sample {
    margin:1em 0;
    padding:1em 0;
    display:table;
    border-spacing:1em;
    background:#AAA}
div#sample span {
    display:table-cell;
    padding:.5em}
div#sample span:nth-child(1) {background:blue}
div#sample span:nth-child(2) {background:red;vertical-align:middle}
div#sample span:nth-child(3) {background:green}

（HTML）
<div id="sample">
    <span>セル１</span>
    <span>セル２</span>
    <span>セル３</span>
</div>

真ん中のセルはvertical-align:middleを指定しているので、文字が中央揃えになっています。同様に、上揃えと下揃えも指定できます。

border-spacingプロパティは、セルの外枠の間隔を指定するテーブル専用のプロパティです。

▲目次へ戻る

4. display:table-row

テーブルセルは、どんどん横に並びます。
table要素内のtr要素のような働きをさせたい場合には、要素に display: table-row を指定します。
display: table-row を指定した要素でテーブルセルの要素を囲むと、改行することができます。

１行目セル１
１行目セル２
１行目セル３

２行目セル１
２行目セル２
２行目セル３

　
ソースは次の通りです。

（CSS）
div#sample {
    margin:1em 0;
    padding:0;
    display:table;
    border-spacing:1em;
    background:#AAA}
div#sample p {
    display:table-row;
    margin:0; padding:0}
div#sample span {
    display:table-cell;
    padding:1em;
    background:#31A9EE}

（HTML）
<div id="sample">
    <p>
        <span>１行目セル１</span>
        <span>１行目セル２</span>
        <span>１行目セル３</span>
    </p>
    <p>
        <span>２行目セル１</span>
        <span>２行目セル２</span>
        <span>２行目セル３</span>
    </p>
</div>

table-rowを指定したp要素で、各行のセルを囲んでいます。

▲目次へ戻る

5. display:inline-table

親要素に display: inline-table を指定すると、複数のテーブルを横に並べることができます。

１-１
１-２

２-１
２-２

　
ソースは次の通りです。

（CSS）
div#sample1, div#sample2 {
    margin:0;
    margin-right:0.5em;
    padding:0;
    display:inline-table;
    border-collapse:separate;
    border-spacing:1em;
    background:#AAA;}
div#sample1 span, div#sample2 span {
    display:table-cell;
    padding:1em;
    background:#31A9EE}
div#sample2 span {background:#FF9696}

（HTML）
<div id="sample1">
    <span>１-１</span>
    <span>１-２</span>
</div>
<div id="sample2">
    <span>２-１</span>
    <span>２-２</span>
</div>

各div要素に、display:inline-tablを指定しています。

▲目次へ戻る

6. display:table-header-group

このほか、table要素内には、グループ化を行うthead要素、tbody要素、tfoot要素、colgroup要素、col要素がありますが、displayプロパティでも同じような指定をすることができます。

display: table-header-group	thead要素と同じ性質
display: table-row-group	tbody要素と同じ性質
display: table-footer-group	tfoot要素と同じ性質
display: table-column-group	colgroup要素と同じ性質
display: table-column	col要素と同じ性質