如何将div宽度设置为其中表格的宽度？答案

【问题标题】：How to set div width to the width of the table in it?如何将div宽度设置为其中表格的宽度？
【发布时间】：2012-09-30 00:31:08
【问题描述】：

我有一个div，其中包含一个table。一切都按我的意愿工作，除了我不知道如何设置div 的width 以便它随着内部table 的width 的增长而增长。我怎样才能做到这一点？谢谢。

这是div的CSS代码：

#events-table-wrapper {
    margin-left: auto;
    margin-right: auto;
    width: 500px;
    margin-top: 100px;
    border: 1px solid #CCC;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

将width 设置为auto 没有帮助。顺便说一句，我没有更改 CSS 表格中的任何内容。

编辑：这是一个现场版本：http://jsfiddle.net/ZDF2U/

【问题讨论】：

@user1136076 jsfiddle.net/ZDF2U

标签： html css width css-tables

【解决方案1】：

您还可以将 div 属性更改为

float:left;
width:auto;

【讨论】：

【解决方案2】：

在您的情况下，您也可以在div：

display: table;

这是 jsFiddle：http://jsfiddle.net/leniel/Et3t5/

这是另一个 jsFiddle，它向您展示了一个类似的案例：http://jsfiddle.net/leniel/T7DTc/

如果 div 的 width: auto; 则扩展以容纳表格内的 textarea。如果将其设置为 width: 500px;，则 textarea 会在 div 之外增长。

所以解决方案看起来像设置width: auto;。当然，您的代码中的某些特殊内容可能会造成干扰。

【讨论】：

在这种情况下，div 具有整个页面的宽度。
非常好的解决方案。比将表格宽度设置为 100% 更好。谢谢！

【解决方案3】：

制作包含inline-block 表的div。 IE。 display: inline-block。这将强制它在被阻塞时呈现内联。或者display: table 也可以。

链接到 jsFiddle：http://jsfiddle.net/Mr9jQ/

【讨论】：

【解决方案4】：

设置table { width:100% } 解决了它。现在我可以保持div 足够大，并且桌子正好适合它。谢谢。

【讨论】：

Leniel 的解决方案更好。这个仍然需要你弄乱 div 的宽度。