tableのセンタリングはややこしぃ

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>

以上 ぉしまい

Comment(0) | Trackback(0)

TAGS: / / | 2010年5月1日 |

« »

コメントは受け付けていません。