具有100%宽度并留出浮动div空间的表格

Question

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

• 当右侧没有浮动div时，我希望表格占据100%的宽度。

• 当右侧有浮动div时，我希望表格给这个div留出空间，并占据剩余的水平空间。

我该如何做到这一点？

- Petronella

---

你的 div 是否有固定宽度？ - Pal Singh

100%的宽度是不可谈判的。 - Diodeus - James MacFarlane

Answer 1

将表格放在一个带有不为“visible”的overflow属性的

中，它将占据浮动元素旁边的剩余区域。然后，在其中的表格可以使用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>

- rgthree

---

这种方法不适用于需要创建一个通用的CSS文件，该文件将根据编辑器应用于任何未知内容。这就是我的问题所在。 - Matmarbon

Answer 2

您可以使用以下代码删除右侧的 div：

display:none;

您可以使用以下方式保留其空间

visibility:hidden;

您的表格将具有100％的宽度，因此当div样式为display:none时，div将不占用空间，表格将自然扩展。如果您仅隐藏div，则表格将保持较小的宽度，基于右侧div的宽度。

此信息可在W3Schools上找到。

- PREEB