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>

表浮动与容器溢出：隐藏

3 个答案: