Question

基本上我有一个容器，它容纳一个表，该表使用javascript定期将数据附加到表中。有了这个，容器的样式正确overflow:auto，以允许它容纳更大量的数据，而不会看起来很难看。

这很好用，直到我用属性float:left;在其下面放置另一个容器。现在该表仅显示第一个附加项。如果我检查元素，我可以“看到”代码中的其他附加数据项，并且页面上会出现一些但不像完整的表格。

如果我从包含该表的div中删除overflow:auto属性，则它可以正常工作（数据将打印在容器外部的页面上）。如果我从容器中删除float:left;属性，它也可以。什么阻止他们一起工作？

更新：我没有在较低的容器上使用float:left，而是添加了一个清除div，以便它可以在下面插入而无需使用float。问题仍然存在，因此通常情况下容器位于下方似乎存在问题。

代码如下。 'data'是包含表格的容器，'download'是位于下方的容器。如果重要，则在下面添加javascript。

<div id="data">
    <table id="data_table">
    </table>
</div>
<div id="download"></div>

样式表：

#data {
    float: left;
    width: 192px;
    height: 400px;
    border: 2px solid black;
    overflow: auto;
}

#data_table {
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    border: 2px solid black;
}

#data_table td {
    border: 1px solid black;
    width: 50px;
}

#download {
    width:900px;
    float:left;
    height: 75px;
    border: 2px solid black;
}

Javascript :(如果以某种方式相关）

$('#data_table').append('<tr><td><?php echo $catVarValue;?></td><td><?php echo $measVarValue;?></td></tr>');

}，）;

Answer 1

找到问题的解决方案。在Firefox中尝试后，我意识到这是一个跨浏览器的问题（因为它工作）。这导致我：

Strange behavior of "overflow: auto" on Chrome

提供解决方案。

表格不再与溢出正确附加：下方的自动和浮动容器

1 个答案: