我有一个任意高度的表格。行是通过JavaScript动态填充的。当添加新行时,我不希望表格超过其高度。新行添加到表格顶部,旧行应从表格底部删除。是否有一种方法可以检测行是否溢出?如图所示,行f、g、h、i应被删除。
.cnt {
width: 100vw;
height: 50vh;
max-width: 100vw;
max-height: 50vh;
text-align: center;
border: 1px solid black;
}
section {
height: 100%
}
table {
display: block;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
table tbody tr td{
margin: 0;
padding: 0;
}
<html>
<body>
<div class="cnt">
<section>
<table>
<tbody>
<tr><td>a</td></tr>
<tr><td>b</td></tr>
<tr><td>c</td></tr>
<tr><td>d</td></tr>
<tr><td>e</td></tr>
<tr><td>f</td></tr>
<tr><td>g</td></tr>
<tr><td>i</td></tr>
</tbody>
</table>
</section>
</div>
</body>
</html>
white-space: nowrap; overflow: hidden;
} - piedpiper