HTML Div не расширяется, когда таблица имеет ширину

Question

Я использую div, в котором находится таблица. Таблица не имеет ширины на моей странице, но она увеличивается.

В качестве теста я попытался установить ширину таблицы внутри div, jsfiddle.

<div style="border:1px solid black;margin:0 50px;">
<div>
<table style="border:1px solid red; width:1000px;">
<tr><td style="white-space: nowrap;">hej</td></tr>
</table>
</div>
<div style="clear:both"></div>
</div>

Может кто-нибудь сказать мне, почему это не работает? Например, div должен охватывать его ширину, чтобы таблица помещалась внутри?

Answer 1

Если вы не указали ширину своей внутренней таблицы и продолжаете добавлять контент, она прекрасно работает.

Вот РАБОЧЕЕ РЕШЕНИЕ.

Код:

<div style="border:1px solid black;margin:0 50px;">
<div>
<table style="border:1px solid red;">
<tr><td>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. </td></tr>
</table>
</div>
<div style="clear:both"></div>
</div>

Надеюсь, это поможет.

Answer 2

Попробуйте установить ширину в %age как

width:100%

проверь эту СКРИПКУ