- ベストアンサー
ＩＥでテーブルが寄ってしまうのはなぜ？対応方法を教えてください
- ＩＥ以外のブラウザなら、中のテーブルが中央に表示されるのにＩＥは左側に赤い中のテーブルが寄ってしまいます。
- CSSのスタイルを修正して、中のテーブルを中央に表示させることができます。
- 具体的な対応方法としては、テーブルの親要素に対してmargin: 0 auto;を指定することで中央に配置することができます。
- GRIDKWBKMYD
- お礼率98% (59/60)
- HTML
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
すでに回答しましたが・・それでIE7以降は改善されるはずですけど・・ ⇒Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html ) ・DOCTYPE宣言がない!! これが最初に忠告されるはず・・ ★ちゃんとDOCTYPE宣言をしましょう。 そのときに、必ずstrictにして置きます。 『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』 IEは、かって他のブラウザを蹴落とすために独自仕様でした(そのためIE用に作られたページ以外は崩れる) 古いIE用を表示させる互換モー時を持っているた、IEに対して標準モードで動作させるように宣言する必要がある。 対症療法な対処ではなく、きちんと対処しないとブラウザ間の誤差に随所で悩まされる ★body直下にtableはありえません。 ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ tableは二次元データをあらわすもので、配置やデザインのためではありません。 ※これは、最低限守らないと!!! [サンプル] ★HTML4.01strict + CSS2.1 ★タブは＿に置換してあるので戻す。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- table[summary="サンプル"]{ width: 90%; margin: 0 auto; background-color:red; border:solid 10px blue; border-radius:15px; } --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<table summary="サンプル"> ＿＿＿<tr> ＿＿＿＿<td>セル</td> ＿＿＿</tr> ＿＿</table> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
その他の回答 (1)
- kita-neko
- ベストアンサー率25% (1/4)
IEのバージョンにもよりますが、margin:autoが使えないことがあります。 以下の方法であればIEでも中央に寄せれます。 <html> <head> <title>test</title> <style type="text/css"> body{ width:100%; text-align:center; } #zentai{ width: 850px; margin: 0 auto; text-align: left; background-color:red; } </style> </head> <body> <div id="zentai"> test </div> </body> </html>
お礼
ありがとうございました。