Contain table within div

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?

Does this answer your question? [Table overflowing outside of div](https://stackoverflow.com/questions/2259189/table-overflowing-outside-of-div) — miken32, Aug 15 '22 at 15:13

score 33 · Accepted Answer · edited Aug 15 '22 at 15:20

33

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>

edited Aug 15 '22 at 15:20

miken32

42,008
16
111
154

answered Aug 18 '10 at 03:36

Michael Robinson

29,278
12
104
130

2

OK, but this only works if you fix the widths of the table elements in advance :). – Daniel Cassidy Aug 18 '10 at 03:42
It’s always struck me as hacky to add `display: table` to things that aren’t tables, but +1 because this works. – Daniel Cassidy Aug 18 '10 at 03:45
I agree, but without knowing the width of the content or dynamically changing width with JS ... – Michael Robinson Aug 18 '10 at 03:46
It’s also worth noting that this works when the `div` contains any arbitrary oversized content (for example `img`), not just a `table`. – Daniel Cassidy Aug 18 '10 at 03:48
ooo good to know. If it wasn't for this question forcing me to to do 5 seconds of research I still wouldn't know about `display:table`. Thanks SO! – Michael Robinson Aug 18 '10 at 03:49
Thanks, I tried this initially but it doesn't work in IE7 (which is my lowest common denominator browser) but I didn't specify it should so you get the accept. – Matt Mitchell Aug 18 '10 at 06:10
IE7! Lucky b*stard! Mine is IE6 :( Thanks. To get it working in IE7 you could try some JS that detects the total width of the table and sets the relevant width to the wrapping div, not ideal but... – Michael Robinson Aug 18 '10 at 07:07
6

I think `display:inline-block` should work as well; it also doesn't feel as 'hacky' as `display:table` – Andrew Ho Aug 08 '13 at 03:03

Contain table within div

1 Answers1