I am experiencing an issue where I can't scroll back up with the scrollbar. The table is dynamically filled with data from a database, and when it gets too long, I am unable to scroll back up. Any suggestions on how to solve this problem? If you need more information, feel free to ask!
https://i.sstatic.net/nhOrY.png
HTML
<div class="talbe-div">
<table>
<tr>
<th>ID</th>
<th>Nombre</th>
<th>Cantidad</th>
</tr>
<php
foreach($filas->fetch_all(MYSQLI_ASSOC) as $fila){
?>
<tr>
<td><?=$fila["ID"]?></td>
<td><?=$fila["Nombre"]?></td>
<td><?=$fila["Cantidad"]?></td>
</tr>
<?php
}
?>
</table>
</div>
CSS
.table-div{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 50px;
height: 50vh;
overflow-y: auto;
overflow-x: hidden;
}
table{
min-width: 15vw;
border: 1px solid white;
color: white;
border-collapse: collapse;
}
th{
text-align: left;
padding-left: 10px;
padding-right: 20px;
border: 1px solid white;
}
td{
padding-left: 10px;
padding-right: 20px;
border: 1px solid white;
}