- ベストアンサー
HTMLでテーブルをfloatで中央配置に並べたい
- HTMLでテーブルをfloatを使用して中央配置に並べる方法について教えてください。
- floatを使って複数のテーブルを並べた際、全体が左に寄ってしまう問題について解決方法を教えてください。
- テーブルとテーブルの間の隙間を固定にするため、マージンを固定したいです。どのように指定すれば良いですか。
- みんなの回答 （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まで中央ぞろえになる為*/ }
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
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に入れるとか・・
お礼
返信ありがとうございます。 こちらでも実行してみました。無事配置されました。 ありがとうございました！
お礼
返信ありがとうございます。 パターン２を使わせていただきました。 助かりました。ありがとうございました！