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

Question

Учитывая этот пример (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> с.

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

Как я могу сделать содержимое div полностью содержащим ребенка table?

Answer 1

Изменить:

Добавить 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/