親要素のwidthは子要素のwidthに関係ないのでしょうか？

質問

お世話になります。
HTMLに疎いプログラマです。。。
タイトルの通りですが、質問があります。

たとえば
<div>
　<table>
　</table>
</div>
のように親要素(div)と子要素(table)があるとします。

この時、<table>がものすごく横長の場合（横スクロールが必要なほど）、その横幅に応じて親要素のdivは横に伸びないのでしょうか？

上記のソースにCSSでborderで線を表示してみたのですが、
<table>は横長になっているにもかかわらず、親の<div>は画面内に収まっているのです。

僕の思惑は、<table>が横に伸びればその親要素である<div>も子要素に応じて横に伸びてほしいのですが、、、。

それができる方法があれば教えて頂きたいです。
それは無理だという仕様であればあきらめます。
どうかお願いいたします。

回答No.1

abril · ベストアンサー

> <table>がものすごく横長の場合（横スクロールが必要なほど）、その横幅に応じて親要素のdivは横に伸びないのでしょうか？

下記の様なサンプルの場合、
------------------------------------------------------------
【HTML】
------------------------------------------------------------
<div class="hoge">
<table class="hoge_child" summary="hoge">
<tr>
<th>項目名</th>
<td>内容</td>
</tr>
</table>
</div>
------------------------------------------------------------
【CSS】
------------------------------------------------------------
div.hoge {
width: 100px;
border: solid 1px #c00;
padding: 10px 0;
}
table.hoge_child {
width: 200px;
border-collapse: collapse;
border: solid 1px #000;
}
table.hoge_child th,
table.hoge_child td {
border: solid 1px #000;
}
------------------------------------------------------------

IE6では親要素の"width: 100px;"を無視して子要素の"width: 200px;"に引っ張られて親要素div.hogeも伸びてしまいますが、Firefox等では質問者様がご覧になった様な状態（div.hogeはあくまで"width: 100px;"でレンダリングされ、table.hoge_childはdiv.hogeの枠をはみ出して表示される）になりますね。
環境によって解釈が違います。
親要素の幅を子要素に依存したいのであれば、親要素の幅を決めない事です。div.hogeにwidthが指定されていなければ、div.hogeは子要素table.hoge_childの長さに合わせて伸びますので。

お礼

すみません＞＜ブラウザを記していませんでした。

僕が確認したのはFireFox３です。
abrilさんのおっしゃるとおり、IEとFireFoxとで挙動が異なりました。

とても参考になりました。ありがとうございます！

回答No.3

soramame99

ANo.2です。もう少しまともな解決法がありました。
divに対して「display:table;」でうまくいくかもしれません。

回答No.2

soramame99

非常に美しくない手ですが、
<table><tr><td>
<div>
　<table>
　</table>
</div>
</td></tr></table>
で、目的の挙動になるかと思います。
（CSS以前の前時代的解決方法ですが。）

お礼

なるほど、だいぶトリッキーな方法もあるのですね。

参考になります。ありがとうございました。