0

我想在同一行显示两个表。然后我正在使用float: left; 这样的。

如果这些表格的宽度超过我overflow: hidden;用来隐藏多余部分的容器。

溢出隐藏工作完美，但桌子不在同一条线上。

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

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

4

3 回答 3

1

添加一个容器div来包装这两个表。然后让它width足够大，可以将两张桌子排成一行。容器的溢出部分不会显示为父级div指定的overflow: hidden;。

请参阅jsFiddle上的更新示例

于 2013-03-29T07:07:26.580 回答
1

给position: relative你的父元素并给position: absolute; top: 0; left: 100px;你的第二个子元素（从第二个子元素中删除float属性）。

工作小提琴

要不然

给White-space: nowrap你的父元素并给display: inline-block你的子元素而不是float: left.

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

工作小提琴

于 2013-03-29T07:12:17.380 回答
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>

于 2013-03-29T07:23:07.033 回答