tableのセンタリングはややこしぃ
2010年5月1日
Categories | ホームページ
表（table要素）をスタイルシートを使ってセンタリングしたい
（中央に寄せたい）場合、ブラウザやバージョンによって表示のされ方が
異なるため結構ややこしいです。私はIEターゲットにHP作っているのですが、
表（table要素）を囲むブロック（div要素）でtext-alignプロパティにcenterを
指定していました。
div.c {text-align: center;}
しかしIEのバージョン違いではセルの中身までセンタリングされてしまう。
こりゃいかんな・・・そこで新たにtable内セル左寄せを追加しました。
div.c {text-align: center;}
div.c table {text-align: left;}
IEでは上記ブロック（div要素）で表を囲めばバージョンの違いでもセンタリング
出来ます。が、しかし、ネスケやファイヤーフォックスではこの指定は認識されず、
全部ブラウザ左に寄ってしまいます。
それを回避するためにtableのmarginプロパティを使います。
div.c table {text-align: left;} 変更前
↓
div.c table {text-align: left; margin: auto;} 変更後
スタイルシートで上記記述をすると、殆どのブラウザで表（table）のセンタリング
が可能になります。完成はこんな感じに。
スタイルシート（css）部分
div.ctable {text-align: center;} IEでのセンタリング
div.ctable table {margin: auto; text-align: left;} IE以外でのセンタリング
ソース（html）部分
<div> <table class="mceItemTable"> <tbody> <tr><th>×××</th><th>×××</th> </tr><tr><td>×××</td><td>×××</td></tr> </tbody> </table> </div>
以上 ぉしまい
