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;
}

它可以工作的关键是“显示”。您可以了解块，内联和内联块的差异。希望它有所帮助

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

2 个答案: