获取表格以填充剩余宽度

Question

我在填充浮动元素中的剩余空间时遇到了一些麻烦。这就是我想要实现的目标：

这就是我到目前为止所做的：

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 width div时，您可以使用overflow:auto和width:auto（默认值）的组合来扩展您的.right div。同时取消注释width:100%以使表格占据.right div的全部宽度：

.right {
  overflow:auto;
}

table {
  width: 100%;
}

Example