css - 将 div 的宽度设置为封闭表格的宽度

Question

我有一个表格，其中一个单元格是这样的:

<td>
    <div class="table-wrapper">
        <table class="inner-table">
        <!--content-->
        </table>
    <div>
</td>

div 在那里，所以我可以在 table 周围放置一个边框，间距为 10 像素。但是，正如它显示的那样，div 是封闭 td 的整个宽度。我想要的是它只是它包装的表格的宽度(加上边距，需要指定)。我无法弄清楚 CSS 来做到这一点，虽然它很简单，但毫无疑问，虽然我已经使用 Javascript 来实现它 - 但如果可能的话，我更愿意使用 CSS 来做到这一点。我曾希望为 div 设置 width:auto 会起作用，但这没有什么区别，

Answer 1

一种方法是使用内联 block

<style>
    .table-wrapper {
        border : 1px solid black;
        padding : 10px;
        display : inline-block; 
    }
</style>

<table width="400px">
<tr>
<td>
OUTER
</td>
<td>
    <div class="table-wrapper">
        <table class="inner-table">
        <tr><td>INNER</td></tr>
        </table>
    <div>
</td>
</tr>
</table>