我想在同一行显示两个表。然后我正在使用float: left;
Like this.
如果这些表的宽度超过容器,我使用overflow: hidden;
来隐藏剩余。
溢出隐藏的工作完美但桌子没有停留在同一条线上。
我该如何解决这个问题。我希望桌子保持在同一条线上。
答案 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>