如何排列两个表格而不使其内容重叠？

我在Win XP上使用Firefox和Chrome的最新版本。我想在同一个水平面上显示两个表格。但是，我遇到了问题。现在我有如何排列两个表格而不使其内容重叠？

<table width="100" style="display: inline-block;"> 
    ... 
</table> 
<table width="100" style="display: inline-block;"> 
    ... 
</table>

但是，现在，两个表重叠，因为第一个表的内容大于100像素。在不改变宽度的情况下，是否有人知道我可以如何更改/添加样式，以便第二个表格将出现在第一个表格的右侧，但清除第一个表格的所有内容？

谢谢 - 戴夫

来源

2012-01-11 Dave

表格文本或图像的内容？编辑：为什么不在'style'内发送'width：100px;'？ – Biotox 2012-01-11 22:06:05

使用'float' - http://css-tricks.com/all-about-floats/ – 2012-01-11 22:12:43

我在上面的style属性中添加了“float：left”，但重叠仍然发生。你指的是什么？另外，你为什么在评论中输入你的答案？ – Dave 2012-01-12 14:00:21

在你可以只设置overflow: hidden上第一台原理，但IE浏览器（IE，甚至9）不会在这种情况下，正确地实现它。解决方法是包裹在div要素表和它们设置相关属性：

<style> 
.tablediv { display: inline-block; width: 100px; overflow: hidden } 
</style> 

<div class=tablediv> 
<table> 
    ... 
</table> 
<div class=tablediv> 
<table> 
    ... 
</table>

这种方式，在不适合分配的宽度中的一个表的内容是完全缺席的渲染。所以它可能比想要的更有效，但这方面的问题并不明确。

来源

2012-01-12 14:35:17

如果您确定第一个表格的宽度不超过100像素，则可以保留第一个表格并为第二个表格指定一个绝对位置。

不要更改显示属性，它会破坏事情。

来源

2012-01-12 14:43:09

如何排列两个表格而不使其内容重叠？

回答

相关问题