IE8などでCSSでテーブルを中央に、テーブル内のテキストは左寄せにしたい

質問

お世話になっております。
・本文・テーブルは中央揃え
・テーブルの内容は左揃え
というものをCSSで作りたいのですが、
どのようにしたらいいのでしょうか。
現在のページの一部は
<div id="main">
<h1>タイトル</h1>
　 <table border="1">
<p>
本文
</p>
<tr>
<td colspan="2"><h2 align="center">○○○</h2></td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
</tr>
～行が続きますが省略～
</table>
</div>
のようになっています。

ちなみに cssのmainは「text-align:center;」を指定しておりますが、
IE8にしたところテーブルが左寄せになってしまいました。

なるべく多くのブラウザで同じような配置になるようにしたいのですが
どうしたらよいでしょうか。よろしくお願いいたします。

回答No.2

t_freak · ベストアンサー

No.1さんの方法では、table内部のテキストが中央ぞろえになってしまい、
「テーブルの内容は左揃え」
という質問者さんのご要望を満たすことができません。

以下でどうぞ。

(1)
div#main{
text-align:center;
}

(2)
div#main table{
margin-left:auto;
margin-right:auto;
text-align:left;
}

＜解説＞
div、table、pなどブロック要素をセンタリングするには、左右のmargin（外余白）をautoにすることで、左右均等に外余白が設定され、ブロックがセンタリングされます(2)。
しかし、8より前のIEではmarginのautoを正しく解釈してくれません。

text-align:centerでブロック要素がセンタリングされない（これでセンタリングされるのはテキストや画像などのインライン要素のみ）のは正しい動作なのですが、8より前のIEではなぜかtext-align:centerでブロック要素がセンタリングされてしまうので、このバグを利用して、div#mainにtext-align:centerを設定して8より前のIEでセンタリングされるようにします(1)。
しかしこれでは、tableの中のテキストまでセンタリングされてしまいますので、div#main配下のtableにtext-align:leftを指定します(2)。

お礼

回答ありがとうございます。
No1さんのソースを見て、ぱっと直感で編集したら
思い通りになったのですが、半分しか理解していなかったため
解説がとても役立ちました。ありがとうございます。

回答No.1

4017B

cssの記述に

div#main, div#main table {
　margin-left: auto;
　margin-right: auto;
　text-align: center;
}

～を適当に追記してみて下さい。

お礼

解凍ありがとうございます。いただいたソースを編集して
div#main table {
　margin-left: auto;
　margin-right: auto;
　text-align: left;
}
にしたところ、うまくいきました。ありがとうございました。