"middle"div 的 CSS 问题不会环绕其内容

Question

Here (及下方)您可以看到一个问题，即“中间”div 不会包装其内容。我试图让它自动包装表格的全部内容，所以四周都有一个整洁的白色 10 像素填充边框。我已经尝试了我能想到的一切，尝试显示模式、 float 、清除、溢出……但似乎没有任何效果。谁能看出我哪里出错了？

#outer {
    height : 200px;
    width : 200px;
    background : red;
    overflow : auto;
    padding : 10px;
}
#middle {
    background : white;
    padding : 10px;
}
#inner {
    border : 1px solid purple;
}
td {
    background : cyan;
    padding : 5px;
    border : 1px solid blue;
}

<div id="outer">
  <div id="middle">
    <table id="inner">
      <tr>
        <td>this is some random text</td>
        <td>this is some random text</td>
        <td>this is some random text</td>
        <td>this is some random text</td>
      </tr>
    </table>
  </div>
</div>

Answer 1

添加

display:inline-block;

到 #middle 定义。

What is the difference between display: inline and display: inline-block?提供有关 inline-block 属性值的更多详细信息。

查看此 updated fiddle .