小さなテーブルを並べるには？

質問

小さな表組みをtableで作成します。
例えばテーブルが10個あったとして、ブラウザの横幅を変えると横に並ぶテーブルの数が変わって、常に上に詰まっていくようにしたいのです。
例）100ｐｘの横幅のテーブルが10個。ブラウザの大きさが500ｐｘの場合は、横に5個づつ2段で並ぶ。ブラウザを700ｐｘに広げると、1段目に7個のテーブルが並び、2段目には3個のテーブルが並ぶ。

↑
こんなイメージです。

画像だと改行せずに並べると同じような事が可能なのですが・・・。

テーブルをdivタグで囲ってfloat:leftをかけてみたのですが、途中まではうまく行くのですがダメでした。display:inline;も試してみましたがダメでした。

ちなみにwinXP IE6.0で作成しております。
解決方法がありましたらよろしくお願いします。

回答No.3

leap_day · ベストアンサー

こんにちは

(ブラウザ幅)(テーブル並び)
1000px　　　　　10
700px　　　　　7,3
500px　　　　　5,5
300px　　　　　3,3,3,1

ということですよね？
かなり端折ってますが・・・
<style type="text/css">
table {
width:100px;
float:left;
}
</style>

<table border="1"><tr><td>&nbsp;</td></tr></table>
<table border="1"><tr><td>&nbsp;</td></tr></table>
<table border="1"><tr><td>&nbsp;</td></tr></table>
<table border="1"><tr><td>&nbsp;</td></tr></table>
<table border="1"><tr><td>&nbsp;</td></tr></table>
<table border="1"><tr><td>&nbsp;</td></tr></table>
<table border="1"><tr><td>&nbsp;</td></tr></table>
<table border="1"><tr><td>&nbsp;</td></tr></table>
<table border="1"><tr><td>&nbsp;</td></tr></table>
<table border="1"><tr><td>&nbsp;</td></tr></table>
<div style="clear:both;"></div>

という風にしているのですよね？
※<tale>に直接floatしてますがそれぞれ<div>で囲んでwidth:100px; float:left;しても同じです

・・・できているようなのですが・・・
＞途中まではうまく行くのですがダメでした
何ができていないのでしょうか？その部分が分からないので答えようがないです（－－；）

お礼

「途中まで～」は私の勘違いのようです。
仰せのやり方でできました。
ありがとうございます。

回答No.2

goulan

float もそうですが、table そのものに、display: inline; で並びます。

floatの方が、多分 楽でしょう。inline指定にしてしまうと、width 指定できないですし、border も面倒です。IEだけならば大丈夫ですけども。

お礼

ありがとうございます。
display:inline;だと並ぶのは並ぶのですが、今度は改行しなくなってしまいました。
floatはばっちりでした。

回答No.1

egoblock

divは横幅を指定しない限りwidthが100％なので並びません。
table自身にfloatをかければ並ぶはずです。

お礼

ありがとうございます。
出来ました。