表浮動與容器溢出：隱藏

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>