英文:
Flex table is not showing my more than 50 rows
问题
基本上，我无法使用滚动条向上滚动。这是一个从数据库填充数据的表格，如果我填充得太多，就无法使用滚动条向上滚动。有一些想法吗？
如果有人需要更多信息，我整天都在这里。
HTML
<div class="table-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;
}
[![enter image description here][1]][1]
这是您提供的内容的翻译。
<details>
<summary>英文:</summary>
Basically i cant go up with the scrollbar, this is a table that is being filled with data from a data base, if i filled too much i cant go upside with the scrollbar, some ideas?
If someone need more information im here all day i think.
[![enter image description here][1]][1]
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;
}
[1]: https://i.stack.imgur.com/nhOrY.png
</details>
# 答案1
**得分**: 1
你想要你的表格可滚动，但在任何时候只显示50vh的高度。
一种做法是将所有内容放在一个容器中，该容器的高度为50vh，并滚动该容器，让表格及其弹性外部div拥有它们所需的高度。
以下是一个简单的示例：
```html
<body>
<div class="container">
<div class="table-div">
<table>
<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;
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;
}
</style>
请注意，上面的示例中省略了表格的实际内容，你可以根据需要添加表格行和单元格。
英文:
You want your table to be scrollable but to show just 50vh in height at any time.
One way of doing this would be to put everything in a container which has height 50vh and scroll that, letting the table with its flexed outer div have as much height as they need.
Here's a simple example:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案2
得分: 0
我遇到了同样的问题。尝试更改高度。如果这不起作用，请提供一个示例输出，我肯定可以帮助您。滚动始终与高度有关。
.table-div {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 50px;
height: 80vh;
overflow-y: auto;
overflow-x: hidden;
}
英文:
I had the same issue. Try to change the height. If this doesn't work, please provide an example output and I am sure I can help you. Scroll always has to do with height.
.table-div{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 50px;
height: 80vh;
overflow-y: auto;
overflow-x: hidden;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论