获取表格以填充剩余宽度答案

【问题标题】：Get table to fill remaining width获取表格以填充剩余宽度
【发布时间】：2017-09-28 05:09:26
【问题描述】：

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

这就是我目前所拥有的：

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

【问题讨论】：

你试试 display: table; ?
根据兼容性，您可以使用calc() DEMO HERE - 有关calc() 的更多信息here

标签： html css html-table css-float

【解决方案1】：

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

.right {
  overflow:auto;
}

table {
  width: 100%;
}

Example

【讨论】：