- Date:2008/11/12
- Category:css
- Author: wonder
前回の続き。
今回はdisplayの値の中でもtable関連のものを中心に調べました。
ついでに調べたまで・・・・。
table
tableの表示スタイル。つまりブロックレベルボックス。
これ、普通のブロックレベルボックスです。しっかり改行されます。なんの、ためにあるのでしょうか・・・。
しかも、Win IEではサポートされていません。ますます謎です。
tableタグは最初からこの値が入っています。
●サポートブラウザ
FF2.0、3.0、Ope9、Google chrome、Mac Safar
inline-table
tableの表示スタイルでかつインラインボックス。横につながるテーブルという感じです。
これは、結構便利です。inlineにして、つまり改行せずに横につながるし、かつpaddingやmarginも効くようです。今まで、必死にfloatしていた手間がはぶけますね。
高さが違う場合、通常はbottomに合うようになってます。vertical-align:top;で上をそろえることもできました。ただ、やっぱり（笑）サポートブラウザが少ないんですよ・・・。
OperaとGoogleは相変わらず対応してくれているんですが、IEとFFがね。
でも、IE8.0betaは対応してました。今後に期待！！
●サポートブラウザ
IE8.0b、Ope9、Google chrome
table-row-group
テーブルの行グループ、タグでいうと<tbody>の表示スタイル。
基本的には、ブロックレベル要素と同じ。ただ、padding、marginはきかないので注意。
※IEだけはmarginを認識するよう。
●サポートブラウザ
FF2.0、3.0、Ope9、Google chrome、Mac Safari
table-header-group
テーブルのヘッダグループ、タグでいうと<thead>の表示スタイル。
この値が指定されていない全てのものの、上に移動する。
が、Googleのみでしか確認できませんでした。
●サポートブラウザ
Google chrome
table-footer-group
テーブルのヘッダグループ、タグでいうと<tfoot>の表示スタイル。
この値が指定されていない全てのものの、下に移動する。
これにいたってはどのブラウザでも確認できずでした。
●サポートブラウザ
なし
table-row
テーブルの行グループ、タグでいうと<tｒ>の表示スタイル。
基本的には、ブロックレベル要素と同じ。padding、marginはきかない。
●サポートブラウザ
FF2.0、3.0、Ope9、Google chrome、Mac Safari
table-column-group
タグでいうと<colgroup>の表示スタイル。
<colgroup>というのは、<th>や<td>と違って要素を含むものではないので、レンダリングはされません。
※IEに関しては、通常のブロックレベル要素に近い形でレンダリングされました。
●サポートブラウザ
FF2.0、3.0、Ope9、Google chrome、Mac Safari
table-column
タグでいうと<col>の表示スタイル。
レンダリングは上記のtable-column-groupと同じ。
※IEに関しては、通常のブロックレベル要素に近い形でレンダリングされました。
●サポートブラウザ
FF2.0、3.0、Ope9、Google chrome、Mac Safari
table-cell
タグでいうと<tr>、<td>の表示スタイル。
通常のブロックレベル要素。
まあ、わざわざこの値にする意味はありませんが・・。
■追記（2008/11/20）
どうやらこのtable-cellはtableタグのセルと同じ動きをするようで、垂直方向の中央ぞろえにも対応しているみたいです。勉強不足でした・・。
●サポートブラウザ
FF2.0、3.0、Ope9、Google chrome、Mac Safari
table-caption
タグでいうと<caption>の表示スタイル。
table-header-groupと似ていて、この値をしていしていない要素の上に表示されます。
こちらは、padding、marginともにきいているようでした。
ただ、Google Chrome以外はブロックレベル要素に近い形になっています。
●サポートブラウザ
FF2.0、3.0、Ope9、Google chrome、Mac Safari
※正確にはGoogle Chromeのみ
今回のtable関連のdisplay値ですが、はっきりいって書いてあることも曖昧です。（汗）
実際いろいろなブラウザで見てもらうと分かりますが、レンダリングが安定せず、各ブラウザでほんとにばらばらです。
どうりで今まで使われてこなかったわけですね・・・。
それに、この値を使いたければdisplay:blockにするか、もしくは<table>タグを使ったほうが早いし、安定してますから。
今後も使われないと思います。
上記「table-cell」参照：table-cellは使い道がありそうです！
marker
<li>の前につくマーカーを表示する。
list-item値が設定されている要素の:beforeか:afterに設定することができます。
これは、<li>の前につくマーカーの表示を色々と変えられるもののようです。
ただ、このdisplay値を設定したから変わるというものでもないので、詳しくは下記のページを参照してください。
・・・むずかしい。
CSS2.1からは削除されるようです。
inline-block
改行されないブロックレベル要素になる。CSS2.1から追加の予定。これは、今までうまく表現できなかったり手間だったりすることがかなり簡単になります。いちいちfloatしていたものも、これですっきりなりそうですね。
ただ、IE6、IE7やFF2.0ではサポートしていないようです。
ハックを使えば同じような方法がとれるみたいなので、また機会があれば勉強します。
それまでは以下をどうぞ。
以上。
普段使わない値だけあったあまり実のないエントリになってしまいました。使えそうなものといえば、最後の2つかなと。ただ、それもサポートしていないブラウザ用のハックが必要になるので、それを勉強しなきゃなと思います。
先はながいな~。ではまた。
追加修正（2008/11/20）
上記のtable関連の値ですが、IEには対応せず、動作が通常のdisplay:block;になるようです。
ので、サポートブラウザから各IEを削除しました。
- Name
- Comment
