
お世話になっております。
・本文・テーブルは中央揃え
・テーブルの内容は左揃え
というものを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ベストアンサー
- 回答日時:
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さんのソースを見て、ぱっと直感で編集したら
思い通りになったのですが、半分しか理解していなかったため
解説がとても役立ちました。ありがとうございます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSで特定のテーブルだけに...
-
TABLEのセルの中の文字を行単位...
-
HTML5で、テーブル内tdタグの高...
-
<th>タグを使っても太字にしな...
-
画面サイズを取得し、テーブル...
-
ホームページのテキストを折り...
-
テーブル内のセル間にスペース...
-
HTML フォントの指定
-
テーブルデータを折り返して表...
-
パソコンで見るとレイアウトが...
-
table 幅固定で、端までいった...
-
HTML tableのセルにtextareaを...
-
<fieldset>タグについて
-
textareaの外側の文字が下付き...
-
テーブルタグの中にdivを含めて...
-
テーブルのヘッダとボディの幅...
-
テーブルの行を折りたたみたい...
-
TRタグの余白をcssで設定するには
-
テーブルの任意の列を非表示に...
-
tableにul,または,olを入れられ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルとテーブルの間隔について
-
CSSで特定のテーブルだけに...
-
テーブル内のセル間にスペース...
-
TABLEのセルの中の文字を行単位...
-
<th>タグを使っても太字にしな...
-
table表を横に並べる際の間隔指定
-
html5のテーブル内でdivのタブ...
-
HTML5で、テーブル内tdタグの高...
-
HTML tableのセルにtextareaを...
-
<fieldset>タグについて
-
tableのcellpadding="0" cellsp...
-
(HTML)Tableを任意の位置に置...
-
ホームページのテキストを折り...
-
HTMLのテーブルをExcelにCopy&P...
-
textareaの外側の文字が下付き...
-
テーブルデータを折り返して表...
-
画面幅に合わせてテーブルのカ...
-
検索窓の位置を指定する方法
-
同じ幅指定のつもりなのに、ブ...
-
tableを縦に続けるとtable間の...
おすすめ情報