Contain table within div

Question

Given this example (http://jsfiddle.net/A8gHg/, code also below), try making your window smaller such that the size of the example is squished.

<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>

You will note that the textboxes (correctly) do not wrap to new lines as they are in individual <td>s.

However, the containing div, as denoted by the blue colour, does not completely wrap the table.

How can I make the containing div fully contain the child table?

Answer 1

Edit:

Add display:table to the wrapping 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/