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

Question

我有一个包含表格的

，一切都按照我的要求运行，除了我不知道如何设置

的宽度，使其随着内部表格的宽度增加而增加。我该怎么做？谢谢。

这是

的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/

- Loolooii

---

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

Answer 1

在你的情况下，你也可以在 div 中执行：

display: table;

以下是 jsFiddle 链接: http://jsfiddle.net/leniel/Et3t5/

---

这是另一个jsFiddle，展示了类似的情况：http://jsfiddle.net/leniel/T7DTc/

如果

的width: auto;，那么它会扩展以容纳表格中的textarea。如果将其设置为width: 500px;，则textarea会超出

。

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

- Leniel Maccaferri

---

在这种情况下，div元素的宽度为整个页面。 - Loolooii

非常棒的解决方案。比将表格宽度设置为100％更好。谢谢！ - Loolooii

Answer 2

设置 table { width:100% } 解决了问题。现在我可以保持 div 足够大，而表格恰好适合其中。谢谢。

- Loolooii

---

Leniel的解决方案更好。这个仍然需要你调整div的宽度。 - Loolooii

Answer 3

让包含表格的div设置为inline-block。即display:inline-block。这将强制它在块级元素中以内联方式呈现。或者使用display:table也可以。

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

- ranieuwe

Answer 4

你也可以更改 div 的属性为

float:left;
width:auto;

- Ste Prescott