よろしくお願いします。 floatを使ってテーブルを横に複数個並べているのですが、全体が左に寄ってしまいます。並べたテーブルすべてを中央に配置するにはどうしたらよいのでしょうか。テーブルとテーブルの間の隙間を固定にしたいので、マージンは固定です。 ■HTML TEST1 TEST2 TEST3 ■CSS table{ float: left; width: 100px; border: 1px solid #000000; margin: 0px 10px 0px 10px; } よろしくお願いいたします。

----パターン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 } TEST1 TEST2 TEST3 ---パターン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まで中央ぞろえになる為*/ }

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

解決済

質問者：fumowe
質問日時：2013/02/06 17:45
回答数：2件

よろしくお願いします。

floatを使ってテーブルを横に複数個並べているのですが、全体が左に寄ってしまいます。
並べたテーブルすべてを中央に配置するにはどうしたらよいのでしょうか。
テーブルとテーブルの間の隙間を固定にしたいので、マージンは固定です。

■HTML
<body>
<table><tr><td>TEST1</td></tr></table>
<table><tr><td>TEST2</td></tr></table>
<table><tr><td>TEST3</td></tr></table>
</body>

■CSS
table{
　　float: left;
　　width: 100px;
　　border: 1px solid #000000;
　　margin: 0px 10px 0px 10px;
}

よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： DrFell
回答日時：2013/02/06 21:14

----パターン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まで中央ぞろえになる為*/
}

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2013/02/07 13:35

No.1

回答者： ORUKA1951
回答日時：2013/02/06 19:50

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に入れるとか・・