如何进行div伸展以包含一个包含的表？

Question

我有一张桌子有时比div里面宽- 这会导致我的桌子越过div边界.

我怎样才能div伸展所以div边框总是在桌子周围？

如果缩小结果窗格,此小提示将显示此问题.

div#wrapper{
    margin: 2em;
    padding: 1em;
    border: 1px solid black;
    width: auto;
}

<div id="wrapper">
    <table border="1">
        <tr>
            <td>stuff</td>
            <td>stuff</td>
            <td>stuff</td>
            <td>stuff</td>
            <td>stuff</td>
            <td>stuff</td>
            <td>stuff</td>
            <td>stuff</td>
            <td>more stuff</td>
            <td>more stuff</td>
            <td>more stuff</td>
            <td>more stuff</td>
            <td>more stuff</td>
        </tr>
    </table>

Answer 1

更改to 的display值是一种方式:div#wrapperinline-block

div#wrapper {
    margin: 2em;
    padding: 1em;
    border: 1px solid black;
    display: inline-block;
}

固定jsFiddle