CSS【 display 】3 ~ table

Agenda Calendar Appointment Planner Schedule Concept

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

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

目次

1.displayプロパティの値
2.display:table
3.display:table-cell
4.display:table-row
5.display:inline-table
6.display:table-header-group

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 を指定すると、次のように表示されます。

セル1
セル2


 
ソースは次の通りです。

(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>セル1</span>
<span>セル2</span>
<span>セル3</span>
</div>

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

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

▲目次へ戻る

4.display:table-row

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

1行目セル1
1行目セル2
1行目セル3

2行目セル1
2行目セル2
2行目セル3

 
ソースは次の通りです。

(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>1行目セル1</span>
<span>1行目セル2</span>
<span>1行目セル3</span>
</p>
<p>
<span>2行目セル1</span>
<span>2行目セル2</span>
<span>2行目セル3</span>
</p>
</div>

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

▲目次へ戻る

5.display:inline-table

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

1-1
1-2
2-1
2-2

 
ソースは次の通りです。

(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>1-1</span>
<span>1-2</span>
</div>
<div id=”sample2″>
<span>2-1</span>
<span>2-2</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要素と同じ性質

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です