Question

Given this example, try making your window smaller such that the size of the example is squished.

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>

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

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