表浮动与容器溢出：隐藏

Question

我想在同一行显示两个表。然后我使用float: left;Like this.

如果这些表的宽度超过容器，我使用overflow: hidden;来隐藏剩余。

溢出隐藏工作完美，但表不留在同一行。

http://jsfiddle.net/bULcB/3/

我怎样才能解决这个问题。我希望桌子呆在同一条线上。

Answer 1

添加一个容器div来包装这两个表。然后使其width足够大，以将两张桌子排成一排。由于父母div已指定overflow: hidden;，容器的溢出部分将不会显示。

查看jsFiddle

Answer 2

最新例子给position: relative到您的父元素，给position: absolute; top: 0; left: 100px;你第二子元素（除去从第二子元素float属性）。

Working Fiddle

否则

给White-space: nowrap到您的父元素，给display: inline-block你的子元素，而不是float: left。

仅适用于最新版本的浏览器。

Working Fiddle

Answer 3

div style="width: 300px; overflow: hidden; "> 
<table cellspacing="0" cellpadding="0" style="float: left; background-color:red;"> 
    <tr> 
     <td>First Table</td> 
    </tr> 
</table> 
<table cellspacing="0" cellpadding="0" style="float: left; background-color:yellow;"> 
    <tr> 
     <td>Second Table</td> 
    </tr> 
</table>