100% 宽度的表格，为浮动 div 留出空间答案

【问题标题】：Table with 100% width that leaves room for floating div100% 宽度的表格，为浮动 div 留出空间
【发布时间】：2017-09-27 01:17:47
【问题描述】：

我有一张用于表格的表格。该解决方案需要自动调整到两种情况：

当表格右侧没有浮动 div 时，我想要表格占据 100% 的宽度。
当表格右侧有浮动div时，希望表格给这个div腾出空间，并占用剩余的横向空间。

我该怎么做？

【问题讨论】：

你的 div 会有固定的宽度吗？
100% 宽度不可协商。

标签： html css html-table css-float

【解决方案1】：

将表格放在一个带有overflow 而不是visible 的div 中，它将占据浮动元素旁边的剩余区域。然后，表里面可以有一个width:100%。代码如下，这是一个 jsfiddle 示例：http://jsfiddle.net/rgthree/uEt35/

CSS

.floater {
    float:right;
}

.tbl-container {
    overflow:hidden;
}

.tbl-container > table {
    width:100%;
}

HTML

<div class="floater">
   This is to the right.
</div>
<div class="tbl-container">
    <table>
        <tr>
            <td>hi</td>
        </tr>
    </table>
</div>

【讨论】：

如果您必须创建一个通用的 CSS 文件，这将不起作用，该文件应应用于任何未知内容，具体取决于编辑器。这就是我的问题。

【解决方案2】：

您可以使用

删除右侧的 div

display:none;

您可以使用保留其空间

visibility:hidden;

您的表格将有 100% 的宽度，因此当 div 为 display:none 时，div 不会占用空间，表格会自然展开。如果您只隐藏 div，表格将根据右侧 div 的宽度保持较小的宽度。

此信息可通过W3Schools获得

【讨论】：