css - 如何使 div 拉伸(stretch)以包含包含的表格？

Question

我的表格有时比其内部的 div 宽 - 这会导致我的表格超出 div 边框。

如何使 div 拉伸(stretch)，以便 div 边框始终围绕表格？

This fiddle如果缩小结果 Pane ，则会显示问题。

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

将 div#wrapper 的 display 值更改为 inline-block 是一种方法:

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

fixed jsFiddle