表浮动与容器溢出:隐藏

时间:2013-03-29 06:59:02

标签: html css

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

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

溢出隐藏的工作完美但桌子没有停留在同一条线上。

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

我该如何解决这个问题。我希望桌子保持在同一条线上。

3 个答案:

答案 0 :(得分:1)

添加容器div以包装两个表。然后使其width足够大,以便将两个表格保持在一条直线上。容器的溢出部分不会显示为父div已指定overflow: hidden;

请参阅jsFiddle

上的更新示例

答案 1 :(得分:1)

position: relative提供给您的父元素,并将position: absolute; top: 0; left: 100px;提供给第二个子元素(从第二个子元素中删除float属性)。

<强> Working Fiddle

White-space: nowrap提供给您的父元素,并将display: inline-block提供给您的子元素,而不是float: left

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

<强> Working Fiddle

答案 2 :(得分:0)

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>