Close

Web技術Tips

Homepage Tips Homepage Tips

ホームWeb技術TipsCSS Table displayについて見直してみる

SHARE

SHARE

CSS3 2016.05.27(公開)

CSS Table displayについて見直してみる

display: table-cell;使ってますか?

気軽にvertical-alignを使えるので、便利ですよね。

特にレスポンシブデザインのサイトでは頼もしく、八面六臂の大活躍を見せてくれます。

でもたまに、こちらの期待してない動きをするときありませんか?

なので今回の記事ではCSSで設定したtable要素について調べてみました。

なお、この記事ではHTML5のタグ要素としてのtableと、cssのdisplayプロパティとしてのtableが登場するので、それぞれ名称を使い分けることにします。

  • HTML5のタグ要素としてのtable → table要素
  • CSSのdisplayプロパティとしてのtable → CSS Table display

Can I useでCSS Table displayの対応表を見てみる

caniuse-image

IEはIE8以上、他のブラウザはほぼ対応しているようです。

ベンダープレフィックスについては何も書いていないですね。

そしてIE6とIE7のシェアの合計は0.08%程度なので無視してOKでしょう。

table要素とCSS Table displayの違い

CSS Table displayの対応表

主要なtable要素 階層 対応するCSS Table displayの値
<table></table> 1 table, inline-table
<thead></thead> 2 table-header-group
<tbody></tbody> 2 table-row-group
<tfoot><tfoot> 2 table-footer-group
<tr></tr> 3 table-row
<th></th> 4 table-cell
<td></td> 4 table-cell

上の図からわかることを箇条書きしてみると、

  • 全てのtable要素に対応したdisplayの値がある。
  • table要素は2通り書き方がある。
  • thとtdは使い分けられない。

が挙げられます。

inline-tableについて

display: table;を指定する代わりに、display: inline-tableとも指定できるらしいです。

普段はブロック要素のように振る舞うテーブル要素ですが、これがインライン要素として振る舞うようになります。

構造

<div style="display: table;">
	<div style="display: table-row-group;">
		<div style="display: table-row;">
			<div style="display: table-cell;"></div>
			<div style="display: table-cell;"></div>
		</div>
	</div>
</div>

一般的なtable要素の構成をCSS Table displayで再現したものです。

table-row-groupとtable-rowは省略しても良い?

これは悩みどころですが、tableの下にいきなりtable-cellが来ても大丈夫かという問題です。

まずtable-row-group(≒tbody)ですが、tbodyは普段省略することが多いので、theadかtfootを使わない限りは省略していいと思います。

table-rowですが、これはtable要素で言うtrタグに該当します。

trタグを省略してるtable要素って見たことないですが、trタグの使い方に則るならば、table-rowは省略できませんよね。

これは調べてもよく分かりませんでした。

使用可能な属性・スタイル
使用不可な属性・スタイル

テーブル特有の属性や、スタイルの比較表です。

また、marginやmin-heightなどの一般的にtableで使えないスタイルを見てみます。

属性・スタイル table属性 CSS Table display 備考
属性
rowspan属性

colspan属性

× CSS Table displayでこれらを実装したい場合、table-cellの子要素にtableを入れ子にすることで一応実装できる。
width属性 × ただしHTML4.1まで。

tableのwidth属性はHTML5から廃止されているので注意。

スタイル
table-layout
border-collapse border-spacingで間隔を指定。
margin × × padding、borderはOK。
position Firefox29以前ではポジションの起点に不具合がある。
vertical-align
min-height

max-height

× × heightならOK。
min-width

max-width

× × widthならOK。
その他
カラム落ち × ×

rowspanとcolspanだけ注意が必要です。

その他の注意点

CSS Table displayを使うときの、ありがちなミスや注意点をメモしておきます。

tableタグ、display: table;の要素にはwidth: 100%;を指定

幅が足りなくなった時に自動で調整するようになります。

CSS Table displayの場合は、display:tableにwidth: 100%を指定します。

画像が縮小しない場合は、画像にwidth: 100%をつけるといいかも。

clearfixに注意

clearfixのうっかり消し忘れに注意。

普段非表示になっているclearfixのafter要素は、table内では表示されてしまうので、tableとclearfixは併用しないほうがいいです。

メディアクエリでdisplayの値をtable-cellからblockに変えた場合、その親要素のtableもblockに変えるべきか?

スマホサイズでblock要素、スマホ以外ではtable要素(th、td、table-cell)をメディアクエリで指定するときに、その親要素であるtableタグやtrタグ、display: tableやdisplay: table-rowをblock要素に指定するべきかという問題です。

基本的なHTMLのルールですと、tableの子要素にいきなりdivやpは入らないので、やはりテーブル要素とブロック要素は揃えるべきでしょう。

そんなに神経質になるようなことじゃない気がしますが…。

display: block;などの要素をtable-cellにしてtable要素にしたとき、rowspanが指定されていると表示がおかしくなる。

mac safariで確認。

タイトルが日本語として怪しい気がしますが、つまりこういうことです。

animation_edit01

灰色のセルにrowspan="3"が設定されています。

①で『切り替え』をクリックすると、②になり、テーブル要素がブロック要素になります。

②で『切り替え』をクリックすると、③になり、再びテーブル要素に戻りますが、中身がずれてしまっています。

これは本当に解決方法が分かりません。

DOE(横浜)のニュースとブログ

News News

横浜のWeb制作会社DOEはホームページ制作に関連するWeb技術、Webデザイン、SEO対策情報など人気&おすすめ記事を随時公開中です。
尚、Twitterでは現場の声がリアルタイム配信中です。良かったらShareして繋がってください。