Question

我有一张桌子，我正用于表格。解决方案需要它可以自动调整到两种情况：

当桌子右边没有浮动div时，我想要表格占据宽度的100％。
当桌子右边有一个浮动div时，我希望桌子为这个div提供空间，并占用剩余的水平空间。

我该怎么做？

Answer 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>

Answer 2

您可以使用

删除右侧的div

display:none;

您可以使用

预订空间

visibility:hidden;

你的表格宽度为100％所以当div显示：none时，div不会占用空间，表格会自然扩展。如果您只隐藏div，则表格将根据右侧div的宽度保持较小的宽度。

此信息位于W3Schools

100％宽度的表，为浮动div留出空间

2 个答案: