html - 获取表格以填充剩余宽度

Question

我在让表格填充 float 元素内的剩余空间时遇到了一些麻烦。这就是我要实现的目标:

这就是我目前所拥有的:

HTML:

<div class="parent">
    <div class="left">

    </div>
    <div class="right">
        <table>
            <tr>
                <td>1</td>
                <td>2</td>
            </tr>
        </table>
    </div>
</div>

CSS:

.parent {
    height: auto;
    overflow: hidden;
}
.left {
    width: 125px;
    background: blue;
    float: left;
    height: 100px;
}
.right {
    background: red;
    height: 100px;
}
table {
    background: green;
    /*width: 100%;*/
}

我试过了 width: 100%但这并没有考虑到左浮动元素，并且表格隐藏在容器之外。我也试过display: block但这会导致 <td>不再像在表格中那样发挥作用。

jsFiddle

Answer 1

当您使用固定的宽度 float 您的.left div 时，您可以结合使用overflow:auto 和 width:auto (默认值)来扩展你的 .right div。同时取消注释 width:100% 使表格占据 .right div 的整个宽度:

.right {
  overflow:auto;
}

table {
  width: 100%;
}

Example