Flex布局表格无法滚动查看50行以上数据求助

问题描述 #

采用Flex布局的表格从数据库加载数据，当数据行数超过50行时，无法通过滚动条向上滚动查看上方内容。

相关代码 #

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;
}

解决思路 #

问题核心是.table-div设置了align-items: center，当表格高度超出容器时，flex布局会将表格垂直居中，导致表格顶部部分被容器裁剪，且无法通过滚动条拉回可视区域。

• 直接修正方案：将.table-div的align-items改为flex-start，让表格从容器顶部开始排列，滚动行为即可恢复正常：

.table-div{
    display: flex;
    justify-content: center;
    align-items: flex-start; /* 替换原align-items: center */
    flex-direction: column;
    padding: 50px;
    height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
}

• 垂直居中兼容方案（可选）：如果需要保持表格在容器内垂直居中，同时支持正常滚动，可以移除align-items: center，给表格添加margin: auto 0来实现垂直居中：

.table-div{
    display: flex;
    justify-content: 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;
    margin: auto 0; /* 实现表格垂直居中 */
}

内容的提问来源于stack exchange，提问作者Nashe