css Flex表未显示超过50行的数据

mnemlml8 于 2023-05-30 发布在其他

关注(0)|答案(2)|浏览(197)

基本上我不能去与滚动条，这是一个表，正在填写的数据从数据库，如果我填补了太多，我不能去与滚动条，一些想法？如果有人需要更多的信息，我想我整天都在这里。

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

css

来源：https://stackoverflow.com/questions/76349616/flex-table-is-not-showing-my-more-than-50-rows

2条答案

按热度按时间

euoag5mw1#

你希望你的表是可滚动的，但在任何时候都只显示50vh的高度。
一种方法是将所有内容放入高度为50vh的容器中，并滚动该容器，让具有flexed外部div的表具有所需的高度。
下面是一个简单的例子：

<body>
  <div class="container">
    <div class="table-div">
      <table>
        <tr>
          <th>ID</th>
          <th>Nombre</th>
          <th>Cantidad</th>
        </tr>
        <tr>
          <th>ID</th>
          <th>Nombre</th>
          <th>Cantidad</th>
        </tr>
        <tr>
          <th>ID</th>
          <th>Nombre</th>
          <th>Cantidad</th>
        </tr>
        <tr>
          <th>ID</th>
          <th>Nombre</th>
          <th>Cantidad</th>
        </tr>
        <tr>
          <th>ID</th>
          <th>Nombre</th>
          <th>Cantidad</th>
        </tr>
        <tr>
          <th>ID</th>
          <th>Nombre</th>
          <th>Cantidad</th>
        </tr>
        <tr>
          <th>ID</th>
          <th>Nombre</th>
          <th>Cantidad</th>
        </tr>
        <tr>
          <th>ID</th>
          <th>Nombre</th>
          <th>Cantidad</th>
        </tr>
        <tr>
          <th>ID</th>
          <th>Nombre</th>
          <th>Cantidad</th>
        </tr>
        <tr>
          <th>ID</th>
          <th>Nombre</th>
          <th>Cantidad</th>
        </tr>
        <tr>
          <th>ID</th>
          <th>Nombre</th>
          <th>Cantidad</th>
        </tr>
        <tr>
          <th>ID</th>
          <th>Nombre</th>
          <th>Cantidad</th>
        </tr>
        <tr>
          <th>ID</th>
          <th>Nombre</th>
          <th>Cantidad</th>
        </tr>
        <tr>
          <th>ID</th>
          <th>Nombre</th>
          <th>Cantidad</th>
        </tr>
        <tr>
          <th>ID</th>
          <th>Nombre</th>
          <th>Cantidad</th>
        </tr>
        <tr>
          <th>ID</th>
          <th>Nombre</th>
          <th>Cantidad</th>
        </tr>
        <tr>
          <th>ID</th>
          <th>Nombre</th>
          <th>Cantidad</th>
        </tr>
        <tr>
          <th>ID</th>
          <th>Nombre</th>
          <th>Cantidad</th>
        </tr>
        <tr>
          <th>ID</th>
          <th>Nombre</th>
          <th>Cantidad</th>
        </tr>
        <tr>
          <th>ID</th>
          <th>Nombre</th>
          <th>Cantidad</th>
        </tr>
        <tr>
          <th>ID</th>
          <th>Nombre</th>
          <th>Cantidad</th>
        </tr>
        <tr>
          <th>ID</th>
          <th>Nombre</th>
          <th>Cantidad</th>
        </tr>
        <tr>
          <th>ID</th>
          <th>Nombre</th>
          <th>Cantidad</th>
        </tr>
        <tr>
          <th>ID</th>
          <th>Nombre</th>
          <th>Cantidad</th>
        </tr>
        <tr>
          <th>ID</th>
          <th>Nombre</th>
          <th>Cantidad</th>
        </tr>
        <tr>
          <th>ID</th>
          <th>Nombre</th>
          <th>Cantidad</th>
        </tr>
        <tr>
          <th>ID</th>
          <th>Nombre</th>
          <th>Cantidad</th>
        </tr>
        <tr>
          <th>ID</th>
          <th>Nombre</th>
          <th>Cantidad</th>
        </tr>
        <tr>
          <th>ID</th>
          <th>Nombre</th>
          <th>Cantidad</th>
        </tr>
        <tr>
          <th>ID</th>
          <th>Nombre</th>
          <th>Cantidad</th>
        </tr>
        <tr>
          <th>ID</th>
          <th>Nombre</th>
          <th>Cantidad</th>
        </tr>
        <tr>
          <th>ID</th>
          <th>Nombre</th>
          <th>Cantidad</th>
        </tr>
        <tr>
          <th>ID</th>
          <th>Nombre</th>
          <th>Cantidad</th>
        </tr>
        <tr>
          <th>ID</th>
          <th>Nombre</th>
          <th>Cantidad</th>
        </tr>
        <tr>
          <th>ID</th>
          <th>Nombre</th>
          <th>Cantidad</th>
        </tr>
        <tr>
          <th>ID</th>
          <th>Nombre</th>
          <th>Cantidad</th>
        </tr>
      </table>
    </div>
  </div>
</body>
<style>
  body {
    background: black;
  }
  
  .container {
    height: 50vh;
    overflow-y: auto;
  }
  
  .table-div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 50px;
    rheight: 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;
  }
</style>

赞(0）回复(0）举报 2023-05-30

fslejnso2#

我也有同样的问题。试着改变高度。如果这不起作用，请提供一个示例输出，我相信我可以帮助你。滚动总是与高度有关。

.table-div{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 50px;
    height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
}

赞(0）回复(0）举报 2023-05-30

我来回答

css Flex表未显示超过50行的数据

2条答案

相关问题

热门标签

最新问答