テーブルを中央に配置する

<< 戻る   トップ >>

テーブルを <div> の中央に配置するには、

<div style="text-align: center">
<table style="border: thin solid red; border-collapse: collapse;">
<tr><td>ひょー!</td></tr>
</table>

ではだめである。これは、テーブルの display 属性が block または table であるためで、inline にすれば問題は解消すべきである。実際、Firefox では解消する。

<div style="text-align: center">
<table style="border: thin solid red; border-collapse: collapse; display: inline;">
<tr><td>ひょー!</td></tr>
</table>

ところが、Opera ではこの手が効かない。わりと行儀のよいブラウザなのにどうしたことか、と思ったらCSS2.1で display: inline-table; を指定しなくてはいけないと言うことがわかった。

と、いうことは Firefox と Opera で display 属性を使い分けねばならないということだ。困ったのだが、悪知恵をはたらかせて次のように指定してみた。

<div style="text-align: center">
<table style="border: thin solid red; border-collapse: collapse; display: inline; display: inline-table;">
<tr><td>ひょー!</td></tr>
</table>

display 属性の二重指定指定である。Firefox では一番目の指定が有効だが、二番目の指定は無効だから display 属性は inline になる。Opera は両方有効だが、最後の指定が有効になるはずだから display 属性は inline-table になる。そううまくいくわけがない、と思ったのだが豈図らんやうまくいった。

ひょー

もっと洗練された方法があるような気がするのだが、一応これで凌ぐことにする。Opera はやっぱりすごいなぁ。


作成: 2006-01-15 01:09:59.0更新: 2006-07-29 17:13:29.0
http://museo-anonimo.jp/nanban/?id=103,http://museo-anonimo.jp/nanban/tr/103