如何将div宽度设置为表格的宽度？

我有一个div，其中包含一个table。除了我不知道如何设置div的width以使其增长为table内部的width，所有内容都按我的意图工作。我怎样才能做到这一点？谢谢。如何将div宽度设置为表格的宽度？

这是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/

来源

2012-10-09 Loolooii

你有一个真人版？ –

@ user1136076 http://jsfiddle.net/ZDF2U/ – Loolooii

在你的情况，你也可以做在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;。当然，你的代码中有些特殊的东西可能会造成干扰。

来源

2012-10-09 16:17:16

在这种情况下，div具有整个页面的宽度。 – Loolooii

非常好的解决方案。比将桌子宽度设置为100％更好。谢谢！ – Loolooii

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

来源

2012-10-09 16:20:23 Loolooii

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

使包含表inline-block的股利。即display: inline-block。这将强制它在块内呈现内联。或者display: table也可以工作。

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

来源

2012-10-09 16:21:29 ranieuwe

你也可以改变的div属性是

float:left; 
width:auto;

来源

2012-10-09 16:24:24

如何将div宽度设置为表格的宽度？

回答

相关问题