包含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/