100％宽度的表格为浮动div留下空间

我有一张表格供表单使用。该解决方案需要它自动可调节的以两种方案：100％宽度的表格为浮动div留下空间

当没有浮动DIV表中的右边，我希望表占用的宽度的100％。
当表格右侧有一个浮动div时，我希望表格给这个div留出空间，并占据剩余的水平空间。

我怎样才能做到这一点？

2012-02-15 Petronella

将您的div有固定的宽度是多少？ – 2012-02-15 18:47:59

100％宽度是不可协商的。 – 2012-02-15 18:49:58

把表格放在一个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>

来源

2012-02-15 18:51:01 rgthree

这很好，谢谢！ – Petronella 2012-02-15 23:41:47

如果您必须创建一个通用CSS文件，则该文件无效，该文件将应用于任何未知内容，具体取决于编辑者。这是我的问题。 – Matmarbon 2014-04-10 13:04:33

可以删除div来正确使用

display:none;

您可以保留使用

visibility:hidden;

你的表将有100％的宽度所以当DIV是显示其空间：none，则DIV不会占用空间，该表将自然扩大。如果只隐藏div，则表格将根据div的宽度向右保持较小的宽度。

此信息可在W3Schools

来源

2012-02-15 18:55:59 thepriebe

100％宽度的表格为浮动div留下空间

回答

相关问题