当前位置：文江博客话题详情

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

发布于 2025-01-06 02:50:04 字数 176 浏览 0 评论 0原文

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

当表格右侧没有浮动div时，我想要表格占据 100% 的宽度。
当表格右侧有一个浮动div时，我希望表格为这个div留出空间，并占用剩余的水平空间。

我该怎么做？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

脸赞 2025-01-13 02:50:04

将表格放在一个 overflow 不可见的 div 中，它将占用浮动元素旁边的剩余区域。然后，里面的表格可以有width:100%。代码如下，这是一个 jsfiddle 示例： http://jsfiddle.net/rg Three/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>

Put the table in a div with an overflow that is not visible and it will take up the remaining area next to the floated element. Then, the table inside that can have a width:100%. The code is below and here's an example 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>

回复收藏 0 原文

预谋 2025-01-13 02:50:04

您可以使用将 div 删除到右侧

display:none;

您可以使用保留其空间

visibility:hidden;

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

此信息可在 W3Schools 获取

You can remove the div to the right using

display:none;

You can reserve its space using

visibility:hidden;

Your table will have a width of 100% so when the div is display:none, the div will not take up space and the table will expand naturally. If you only hide the div the table will maintain a smaller width based on the width of the div to the right.

This info is available at W3Schools

回复收藏 0 原文

~没有更多了~