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?

Thanks.

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/

Answer 2

Firefox 3.6.8 and Internet Explorer 8 both render the blue div behind the entire table. What am I missing?

edit: Oh, really small screen resolution needed.