当孩子长大后，如何让html div扩展？

Question

我有一个包含表格的主div：

<div id="main_container"><table>

您可以在以下位置查看完整代码： http://jsfiddle.net/tF62u/

如您所见，子表比div宽，但它（div）不会相应调整。

我在这里找不到哪个定义？

Answer 1

将display:inline-block添加到div的CSS规则中：

#main_container {
    font-size: 9px;
    border: solid 3px #faa;
    background-color: rgba(245, 255, 10, 0.12);
    display: inline-block;
}

<强> jsFiddle example

Answer 2

只需让#main_container display table-cell：

#main_container {
    display: table-cell;
}

DEMO

Answer 3

将display:table;添加到您的#main_container

http://jsfiddle.net/tF62u/4/

Answer 4

一种可能性是使div浮动。浮动元素与其内容一样宽，而不是与窗口一样宽。

#main_container {
    font-size: 9px;
    border: solid 3px gray;
    background-color: rgba(245, 255, 10, 0.12);
    float:left;
}

Updated fiddle

如果窗口宽于桌子，请务必事后clear此浮动，否则后面的其他内容将显示在div的右侧。
顺便说一句，这也适用于display:inline-block;如果你这样做，你需要确保div后跟一个块元素。

对于这个特殊的小提琴，另一个解决方案是完全删除div并将所有样式应用于表格。当然，这只有在表格是div的所有内容时才有效...