如何使div宽度适合div内的表格？

Question

如果table在div内部并且表格的宽度不确定，这可能比屏幕宽度更宽，那么如何使包含该表格的div调整表格宽度？ 由于div已经设置了padding: 10px ，当表超过屏幕宽度时， padding-right变为不可见。

这是代码：

<div class="panel-body">
   <table class="table table-hover table-bordered"></table>
</div>

Answer 1

我想你想要这样的东西

的jsfiddle

HTML

<div class="panel-body">
<table class="table table-hover table-bordered" border=1>
    <tr>
        <td> R1C1 </td>
        <td> R1C2 </td>
    </tr>
    <tr>
        <td> R2C1 </td>
        <td> R2C2 </td>
    </tr>
    <tr>
        <td> R3C1 </td>
        <td> R3C2 </td>
    </tr>
</table>
</div>

CSS

html, body
{
    width:100%;
    margin:0%;
}

.panel-body
{
    margin:0%;
    width:100%;
    background:#ccc;
    height:auto;
    padding:5px 0px;
}

.panel-body table
{
    margin:0;
    width:100%;
    text-align:center;
}

Answer 2

我找到了一种方法。

.panel-body{
    display: inline-block;
    padding: 10px;
}

它可以工作的关键是“显示”。你可以学习块，内联和内联块的差异。 希望能帮助到你