Question

我在Win XP上使用最新版本的Firefox和Chrome。我想在同一水平面上显示两个表格。但是，我遇到了问题。现在我有：

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

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

Answer 1

原则上你可以在第一个表上设置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>

这样，其中一个表中不符合分配宽度的内容在渲染时完全没有。所以它可能比预期更有效，但问题在这方面并不十分明确。

Answer 2

如果你确定第一个表永远不会超过100个像素，你可以保留第一个表，并给第二个表一个绝对位置。

不要改变显示属性，它会破坏事物。

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

2 个答案: