HTMLでテーブルをfloatで中央配置に並べたい

2013/02/06 17:45

このQ&Aのポイント

HTMLでテーブルをfloatを使用して中央配置に並べる方法について教えてください。
floatを使って複数のテーブルを並べた際、全体が左に寄ってしまう問題について解決方法を教えてください。
テーブルとテーブルの間の隙間を固定にするため、マージンを固定したいです。どのように指定すれば良いですか。

fumowe
お礼率83% (15/18)

CSS
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

DrFell
ベストアンサー率55% (305/551)

2013/02/06 21:14 回答No.2

----パターン1 table{ float: left; width: 100px; border: 1px solid #000000; margin: 0px 10px 0px 10px; } div{/*たぶん詳細度が弱いので、適切なセレクタにしてください。*/ margin-left:auto;/*ブロック要素の中央ぞろえは幅を決めて、左右のmarginをautoが定石です。*/ margin-right:auto; width:360px } <div> <table><tr><td>TEST1</td></tr></table> <table><tr><td>TEST2</td></tr></table> <table><tr><td>TEST3</td></tr></table> </div> ---パターン2 質問の内容のhtmlそのままでｃｓｓだけで解決すると body{ text-align:center;/*インライン要素にのみ有効の中央揃え*/ } table{ display:inline-block;/*フロートではなくinline-blockで並べます*/ width: 100px; border: 1px solid #000000; margin: 0px 10px 0px 10px; } td{ text-align:left;/*ほっておくとtdまで中央ぞろえになる為*/ }

質問者

お礼 2013/02/07 13:35

返信ありがとうございます。パターン２を使わせていただきました。助かりました。ありがとうございました！

ログインすると、全ての回答が全文表示されます。

その他の回答 (1)

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/02/06 19:50 回答No.1

tableを配置に使用するのは?です。あくまで本当の表として・・　floatは本来、画像などのデータの周囲にテキストを回りこませるためのものでこの様な用途には不向きです。特に中央配置は <div class="table3"> 　<div> 　　<table></table> 　</div> 　<div> 　　<table></table> 　</div> 　<div> 　　<table></table> 　</div> </div> 　のように一つ一つの表と全体をdivで囲んで、 div.table3{width:100%;margin:0 auto;text-align:center;} div.table3 div{display:inline-block;width:30%;position:relative;} div.table3 div table{width:100%;} とか・・・いっそのこと、全体をtableに入れるとか・・

質問者