html - 在 div 中包含表

Question

给定这个例子，试着让你的窗口变小，这样例子的大小就会被压扁。

div {
    padding: 1em;
    background: #2424c6
}

table {
    width: 100%;
}

input {
    width: 150px;
}

<div>
    <table>
        <tr>
            <td>
                <input type="text"/>
            </td>
            <td>
                <input type="text"/>
            </td>
            <td>
                <input type="text"/>
            </td>
            <td>
                <input type="text"/>
            </td>
            <td>
                <input type="text"/>
            </td>
        </tr>
    </table>
</div>

您会注意到文本框(正确地)不会换行，因为它们在单独的 <td> 中。

但是，包含 div ，如蓝色所示，并未完全包裹住 table 。

我怎样才能使包含div完全包含 child table ？

Answer 1

添加display:table到包装 div。

div {
    padding: 1em;
    background: #2424c6;
    display: table;
}

table {
    width: 100%;
}

input {
    width: 150px;
}

<div>
    <table>
        <tr>
            <td>
                <input type="text"/>
            </td>
            <td>
                <input type="text"/>
            </td>
            <td>
                <input type="text"/>
            </td>
            <td>
                <input type="text"/>
            </td>
            <td>
                <input type="text"/>
            </td>
        </tr>
    </table>
</div>