个人而言，我只是这样做：

HTML代码：

<div>
    <table>
    </table>
</div>

CSS代码：

div {
    display: inline;
}

如果在div上应用浮点数，它也会起作用，但显然，您需要在下一个HTML元素中应用“清除两者”的CSS规则。

尝试显示：inline block；。为了实现跨浏览器兼容，请使用以下css代码。

第二部分{显示：内联块；显示：-moz内联堆栈；缩放：1；*显示：内联；边框样式：实心；边框颜色：#0000ff；}＜div＞<表><tr><td>第1列</td><td>第2列</td><td>第3列</td></tr></table></div>

仅仅

<div style="display: inline;">
    <table>
    </table>
</div>

display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;

Foo Hack–对内联块样式的跨浏览器支持（2007-11-19）。

只需设置宽度和高度以适合内容。这很简单。

div {

    width: fit-content;
    height: fit-content;
    padding: 10px;

}

我正在添加填充：10px；。如果省略了它，div元素将完全与表保持一致，看起来有点笨拙。填充将在元素的边界与其内容之间创建给定的空间。但这是你的愿望，不是强制性的。

如果我们定义一个全局变量并将其用于这两个变量会怎么样。

：根目录{--表格宽度：400px；}.容器{width:var（--表格宽度）；边框：1px实心黑色；//易于可视化}.内表{width:var（--表格宽度）；边框：1px纯红色；//易于可视化}<div class=“container”><table class=“inner table”><tr><td>美国广播公司</td></tr></table></div>