我的布局类似于：
<div>
<table>
</table>
</div>
我希望div只扩展到表的宽度。
当前回答
如果我们定义一个全局变量并将其用于这两个变量会怎么样。
：根目录{--表格宽度：400px；}.容器{width:var（--表格宽度）；边框：1px实心黑色；//易于可视化}.内表{width:var（--表格宽度）；边框：1px纯红色；//易于可视化}<div class=“container”><table class=“inner table”><tr><td>美国广播公司</td></tr></table></div>
其他回答
在Firebug中我发现了属性值-moz fit content，它完全符合OP的要求，可以如下使用：
width: -moz-fit-content;
虽然它只在Firefox上运行，但我找不到其他浏览器（如Chrome）的等效版本。
这里有一个工作演示-
.浮动框{显示：-moz内联堆栈；显示：内联块；宽度：配合内容；高度：配合内容；宽度：150px；高度：75px；边距：10px；边框：3px实心#73AD21；}<h2>The Way正在使用内联块</h2>CSS中还添加了支持元素。＜div＞<div class=“floating box”>浮动框</div><div class=“floating box”>浮动框</div><div class=“floating box”>浮动框</div><div class=“floating box”>浮动框</div><div class=“floating box”>浮动框</div><div class=“floating box”>浮动框</div><div class=“floating box”>浮动框</div><div class=“floating box”>浮动框</div></div>
尝试显示：inline block；。为了实现跨浏览器兼容，请使用以下css代码。
第二部分{显示：内联块；显示：-moz内联堆栈；缩放：1；*显示：内联；边框样式：实心；边框颜色：#0000ff；}＜div＞<表><tr><td>第1列</td><td>第2列</td><td>第3列</td></tr></table></div>
我认为使用
display: inline-block;
但我不确定浏览器的兼容性。
另一种解决方案是将您的div包装在另一个div中（如果您想保持块行为）：
HTML格式：
<div>
<div class="yourdiv">
content
</div>
</div>
CSS:
.yourdiv
{
display: inline;
}
您需要一个具有CSS所称的收缩以适应宽度的块元素，而规范并没有提供一种获得这种东西的好方法。在CSS2中，缩小尺寸并不是一个目标，而是指处理浏览器“必须”凭空获得宽度的情况。这些情况包括：
浮动绝对定位元件内联块元素表元素
当没有指定宽度时。我听说他们想在CSS3中添加你想要的内容。现在，就用上面的一个吧。
不直接曝光该功能的决定可能看起来很奇怪，但有充分的理由。它很贵。缩小到适合意味着至少设置两次格式：在知道元素的宽度之前，不能开始设置元素的格式，并且不能计算整个内容的宽度。此外，人们不需要像想象的那样经常收缩以适应元素。为什么你的桌子周围需要额外的div？也许你只需要表格标题。
