我的布局类似于：
<div>
<table>
</table>
</div>
我希望div只扩展到表的宽度。
当前回答
div{
width:auto;
height:auto;
}
其他回答
可以对父元素使用display:flex
#parentElement {
display: flex;
flex-direction: column;
align-items: flex-start;
}
我认为使用
display: inline-block;
但我不确定浏览器的兼容性。
另一种解决方案是将您的div包装在另一个div中（如果您想保持块行为）：
HTML格式：
<div>
<div class="yourdiv">
content
</div>
</div>
CSS:
.yourdiv
{
display: inline;
}
您需要一个具有CSS所称的收缩以适应宽度的块元素，而规范并没有提供一种获得这种东西的好方法。在CSS2中，缩小尺寸并不是一个目标，而是指处理浏览器“必须”凭空获得宽度的情况。这些情况包括：
浮动绝对定位元件内联块元素表元素
当没有指定宽度时。我听说他们想在CSS3中添加你想要的内容。现在，就用上面的一个吧。
不直接曝光该功能的决定可能看起来很奇怪，但有充分的理由。它很贵。缩小到适合意味着至少设置两次格式：在知道元素的宽度之前，不能开始设置元素的格式，并且不能计算整个内容的宽度。此外，人们不需要像想象的那样经常收缩以适应元素。为什么你的桌子周围需要额外的div？也许你只需要表格标题。
您可以尝试此代码。按照CSS部分中的代码操作。
第二部分{显示：内联块；填充：2vw；背景色：绿色；}表{宽度：70vw；背景色：白色；}＜div＞<table border=“colapsed”><tr><td>苹果</td><td>香蕉</td><td>草莓</td></tr><tr><td>苹果</td><td>香蕉</td><td>草莓</td></tr><tr><td>苹果</td><td>香蕉</td><td>草莓</td></tr></table></div>
您可以使用内联块作为@user473598，但要注意较旧的浏览器。。
/* Your're working with */
display: inline-block;
/* For IE 7 */
zoom: 1;
*display: inline;
/* For Mozilla Firefox < 3.0 */
display:-moz-inline-stack;
Mozilla根本不支持内联块，但他们有-moz内联堆栈，这几乎是一样的
内联块显示属性周围的一些跨浏览器：https://css-tricks.com/snippets/css/cross-browser-inline-block/
您可以在以下位置看到一些具有此属性的测试：https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
