Содержит таблицу в div

Учитывая этот пример (http://jsfiddle.net/A8gHg/, код ниже), попробуйте сделать ваше окно меньше, чтобы размер примера был сплющен.

<div style="background-color:blue">
    <table style="width:100%">
        <tr>
            <td>
                <input type="text" style="width:150px"/>
            </td>
            <td>
                <input type="text" style="width:150px"/>
            </td>
            <td>
                <input type="text" style="width:150px"/>
            </td>
            <td>
                <input type="text" style="width:150px"/>
            </td>
            <td>
                <input type="text" style="width:150px"/>
            </td>
        </tr>
    </table>
</div>

Вы заметите, что текстовые поля (правильно) не переносятся на новые строки, поскольку они находятся в отдельных <td> s.

Однако содержащее div, обозначенное синим цветом, не полностью завершает таблицу.

Как сделать, чтобы содержащее div полностью содержало дочерний элемент table?

Ответы

Ответ 1

Edit:

Добавьте display:table в обертку div.

<div style="background-color:blue;padding:5px;display:table;">
    <table style="margin:5px;">
        <tr>
            <td>
                <input type="text" style="width:150px"/>
            </td>
            <td>
                <input type="text" style="width:150px"/>
            </td>
            <td>
                <input type="text" style="width:150px"/>
            </td>
            <td>
                <input type="text" style="width:150px"/>
            </td>
            <td>
                <input type="text" style="width:150px"/>
            </td>
        </tr>
    </table>
</div>

http://jsfiddle.net/A8gHg/11/