Flex表格未显示超过50行。

huangapple
go评论92阅读模式
英文:

Flex table is not showing my more than 50 rows

问题

基本上，我无法使用滚动条向上滚动。这是一个从数据库填充数据的表格，如果我填充得太多，就无法使用滚动条向上滚动。有一些想法吗？
如果有人需要更多信息，我整天都在这里。

HTML

  1. <div class="table-div">
  2.     <table>
  3.         <tr>
  4.             <th>ID</th>
  5.             <th>Nombre</th>
  6.             <th>Cantidad</th>
  7.         </tr>
  8.         <?php 
  9.         foreach($filas->fetch_all(MYSQLI_ASSOC) as $fila){
  10.         ?>
  11.         <tr>
  12.             <td><?=$fila["ID"]?></td>
  13.             <td><?=$fila["Nombre"]?></td>
  14.             <td><?=$fila["Cantidad"]?></td>
  15.         </tr>
  16.         <?php
  17.         }
  18.         ?>
  19.     </table>
  20. </div>

CSS

  1. .table-div{
  2.     display: flex;
  3.     justify-content: center;
  4.     align-items: center;
  5.     flex-direction: column;
  6.     padding: 50px;
  7.     height: 50vh;
  8.     overflow-y: auto;
  9.     overflow-x: hidden;
  10. }
  12. table{
  13.     min-width: 15vw;
  14.     border: 1px solid white;
  15.     color: white;
  16.     border-collapse: collapse;
  17. }
  19. th{
  20.     text-align: left;
  21.     padding-left: 10px;
  22.     padding-right: 20px;
  23.     border: 1px solid white;
  24. }
  26. td{
  27.     padding-left: 10px;
  28.     padding-right: 20px;
  29.     border: 1px solid white;
  30. }

[![enter image description here][1]][1]

  2. 这是您提供的内容的翻译。
  4. <details>
  5. <summary>英文:</summary>
  7. 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?
  8. If someone need more information im here all day i think.
  10. [![enter image description here][1]][1]
  13. HTML
  15.     &lt;div class=&quot;talbe-div&quot;&gt;
  16.         &lt;table&gt;
  17.             &lt;tr&gt;
  18.                 &lt;th&gt;ID&lt;/th&gt;
  19.                 &lt;th&gt;Nombre&lt;/th&gt;
  20.                 &lt;th&gt;Cantidad&lt;/th&gt;
  21.             &lt;/tr&gt;
  22.         &lt;?php 
  23.         foreach($filas-&gt;fetch_all(MYSQLI_ASSOC) as $fila){
  24.             ?&gt;
  25.             &lt;tr&gt;
  26.                 &lt;td&gt;&lt;?=$fila[&quot;ID&quot;]?&gt;&lt;/td&gt;
  27.                 &lt;td&gt;&lt;?=$fila[&quot;Nombre&quot;]?&gt;&lt;/td&gt;
  28.                 &lt;td&gt;&lt;?=$fila[&quot;Cantidad&quot;]?&gt;&lt;/td&gt;
  29.             &lt;/tr&gt;
  30.             &lt;?php
  31.         }
  33.         ?&gt;
  34.         &lt;/table&gt;
  35.     &lt;/div&gt;
  38. CSS
  40.     .table-div{
  41.         display: flex;
  42.         justify-content: center;
  43.         align-items: center;
  44.         flex-direction: column;
  45.         padding: 50px;
  46.         height: 50vh;
  47.         overflow-y: auto;
  48.         overflow-x: hidden;
  49.     }
  51.     table{
  52.         min-width: 15vw;
  53.         border: 1px solid white;
  54.         color: white;
  55.         border-collapse: collapse;
  56.     }
  58.     th{
  59.         text-align: left;
  60.         padding-left: 10px;
  61.         padding-right: 20px;
  62.         border: 1px solid white;
  63.     }
  65.     td{
  66.         padding-left: 10px;
  67.         padding-right: 20px;
  68.         border: 1px solid white;
  69.     }
  72.   [1]: https://i.stack.imgur.com/nhOrY.png
  74. </details>
  77. # 答案1
  78. **得分**: 1
  80. 你想要你的表格可滚动，但在任何时候只显示50vh的高度。
  82. 一种做法是将所有内容放在一个容器中，该容器的高度为50vh，并滚动该容器，让表格及其弹性外部div拥有它们所需的高度。
  84. 以下是一个简单的示例：
  86. ```html
  87. <body>
  88.   <div class="container">
  89.     <div class="table-div">
  90.       <table>
  91.         <tr>
  92.           <th>ID</th>
  93.           <th>Nombre</th>
  94.           <th>Cantidad</th>
  95.         </tr>
  96.         <!-- 这里省略了表格的内容，你可以根据需要添加 -->
  97.       </table>
  98.     </div>
  99.   </div>
  100. </body>
  101. <style>
  102.   body {
  103.     background: black;
  104.   }
  106.   .container {
  107.     height: 50vh;
  108.     overflow-y: auto;
  109.   }
  111.   .table-div {
  112.     display: flex;
  113.     justify-content: center;
  114.     align-items: center;
  115.     flex-direction: column;
  116.     padding: 50px;
  117.     height: 50vh;
  118.     overflow-y: auto;
  119.     overflow-x: hidden;
  120.   }
  122.   table {
  123.     min-width: 15vw;
  124.     border: 1px solid white;
  125.     color: white;
  126.     border-collapse: collapse;
  127.   }
  129.   th {
  130.     text-align: left;
  131.     padding-left: 10px;
  132.     padding-right: 20px;
  133.     border: 1px solid white;
  134.   }
  136.   td {
  137.     padding-left: 10px;
  138.     padding-right: 20px;
  139.     border: 1px solid white;
  140.   }
  141. </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 -->

  1. &lt;body&gt;
  2. &lt;div class=&quot;container&quot;&gt;
  3. &lt;div class=&quot;table-div&quot;&gt;
  4. &lt;table&gt;
  5. &lt;tr&gt;
  6. &lt;th&gt;ID&lt;/th&gt;
  7. &lt;th&gt;Nombre&lt;/th&gt;
  8. &lt;th&gt;Cantidad&lt;/th&gt;
  9. &lt;/tr&gt;
  10. &lt;tr&gt;
  11. &lt;th&gt;ID&lt;/th&gt;
  12. &lt;th&gt;Nombre&lt;/th&gt;
  13. &lt;th&gt;Cantidad&lt;/th&gt;
  14. &lt;/tr&gt;
  15. &lt;tr&gt;
  16. &lt;th&gt;ID&lt;/th&gt;
  17. &lt;th&gt;Nombre&lt;/th&gt;
  18. &lt;th&gt;Cantidad&lt;/th&gt;
  19. &lt;/tr&gt;
  20. &lt;tr&gt;
  21. &lt;th&gt;ID&lt;/th&gt;
  22. &lt;th&gt;Nombre&lt;/th&gt;
  23. &lt;th&gt;Cantidad&lt;/th&gt;
  24. &lt;/tr&gt;
  25. &lt;tr&gt;
  26. &lt;th&gt;ID&lt;/th&gt;
  27. &lt;th&gt;Nombre&lt;/th&gt;
  28. &lt;th&gt;Cantidad&lt;/th&gt;
  29. &lt;/tr&gt;
  30. &lt;tr&gt;
  31. &lt;th&gt;ID&lt;/th&gt;
  32. &lt;th&gt;Nombre&lt;/th&gt;
  33. &lt;th&gt;Cantidad&lt;/th&gt;
  34. &lt;/tr&gt;
  35. &lt;tr&gt;
  36. &lt;th&gt;ID&lt;/th&gt;
  37. &lt;th&gt;Nombre&lt;/th&gt;
  38. &lt;th&gt;Cantidad&lt;/th&gt;
  39. &lt;/tr&gt;
  40. &lt;tr&gt;
  41. &lt;th&gt;ID&lt;/th&gt;
  42. &lt;th&gt;Nombre&lt;/th&gt;
  43. &lt;th&gt;Cantidad&lt;/th&gt;
  44. &lt;/tr&gt;
  45. &lt;tr&gt;
  46. &lt;th&gt;ID&lt;/th&gt;
  47. &lt;th&gt;Nombre&lt;/th&gt;
  48. &lt;th&gt;Cantidad&lt;/th&gt;
  49. &lt;/tr&gt;
  50. &lt;tr&gt;
  51. &lt;th&gt;ID&lt;/th&gt;
  52. &lt;th&gt;Nombre&lt;/th&gt;
  53. &lt;th&gt;Cantidad&lt;/th&gt;
  54. &lt;/tr&gt;
  55. &lt;tr&gt;
  56. &lt;th&gt;ID&lt;/th&gt;
  57. &lt;th&gt;Nombre&lt;/th&gt;
  58. &lt;th&gt;Cantidad&lt;/th&gt;
  59. &lt;/tr&gt;
  60. &lt;tr&gt;
  61. &lt;th&gt;ID&lt;/th&gt;
  62. &lt;th&gt;Nombre&lt;/th&gt;
  63. &lt;th&gt;Cantidad&lt;/th&gt;
  64. &lt;/tr&gt;
  65. &lt;tr&gt;
  66. &lt;th&gt;ID&lt;/th&gt;
  67. &lt;th&gt;Nombre&lt;/th&gt;
  68. &lt;th&gt;Cantidad&lt;/th&gt;
  69. &lt;/tr&gt;
  70. &lt;tr&gt;
  71. &lt;th&gt;ID&lt;/th&gt;
  72. &lt;th&gt;Nombre&lt;/th&gt;
  73. &lt;th&gt;Cantidad&lt;/th&gt;
  74. &lt;/tr&gt;
  75. &lt;tr&gt;
  76. &lt;th&gt;ID&lt;/th&gt;
  77. &lt;th&gt;Nombre&lt;/th&gt;
  78. &lt;th&gt;Cantidad&lt;/th&gt;
  79. &lt;/tr&gt;
  80. &lt;tr&gt;
  81. &lt;th&gt;ID&lt;/th&gt;
  82. &lt;th&gt;Nombre&lt;/th&gt;
  83. &lt;th&gt;Cantidad&lt;/th&gt;
  84. &lt;/tr&gt;
  85. &lt;tr&gt;
  86. &lt;th&gt;ID&lt;/th&gt;
  87. &lt;th&gt;Nombre&lt;/th&gt;
  88. &lt;th&gt;Cantidad&lt;/th&gt;
  89. &lt;/tr&gt;
  90. &lt;tr&gt;
  91. &lt;th&gt;ID&lt;/th&gt;
  92. &lt;th&gt;Nombre&lt;/th&gt;
  93. &lt;th&gt;Cantidad&lt;/th&gt;
  94. &lt;/tr&gt;
  95. &lt;tr&gt;
  96. &lt;th&gt;ID&lt;/th&gt;
  97. &lt;th&gt;Nombre&lt;/th&gt;
  98. &lt;th&gt;Cantidad&lt;/th&gt;
  99. &lt;/tr&gt;
  100. &lt;tr&gt;
  101. &lt;th&gt;ID&lt;/th&gt;
  102. &lt;th&gt;Nombre&lt;/th&gt;
  103. &lt;th&gt;Cantidad&lt;/th&gt;
  104. &lt;/tr&gt;
  105. &lt;tr&gt;
  106. &lt;th&gt;ID&lt;/th&gt;
  107. &lt;th&gt;Nombre&lt;/th&gt;
  108. &lt;th&gt;Cantidad&lt;/th&gt;
  109. &lt;/tr&gt;
  110. &lt;tr&gt;
  111. &lt;th&gt;ID&lt;/th&gt;
  112. &lt;th&gt;Nombre&lt;/th&gt;
  113. &lt;th&gt;Cantidad&lt;/th&gt;
  114. &lt;/tr&gt;
  115. &lt;tr&gt;
  116. &lt;th&gt;ID&lt;/th&gt;
  117. &lt;th&gt;Nombre&lt;/th&gt;
  118. &lt;th&gt;Cantidad&lt;/th&gt;
  119. &lt;/tr&gt;
  120. &lt;tr&gt;
  121. &lt;th&gt;ID&lt;/th&gt;
  122. &lt;th&gt;Nombre&lt;/th&gt;
  123. &lt;th&gt;Cantidad&lt;/th&gt;
  124. &lt;/tr&gt;
  125. &lt;tr&gt;
  126. &lt;th&gt;ID&lt;/th&gt;
  127. &lt;th&gt;Nombre&lt;/th&gt;
  128. &lt;th&gt;Cantidad&lt;/th&gt;
  129. &lt;/tr&gt;
  130. &lt;tr&gt;
  131. &lt;th&gt;ID&lt;/th&gt;
  132. &lt;th&gt;Nombre&lt;/th&gt;
  133. &lt;th&gt;Cantidad&lt;/th&gt;
  134. &lt;/tr&gt;
  135. &lt;tr&gt;
  136. &lt;th&gt;ID&lt;/th&gt;
  137. &lt;th&gt;Nombre&lt;/th&gt;
  138. &lt;th&gt;Cantidad&lt;/th&gt;
  139. &lt;/tr&gt;
  140. &lt;tr&gt;
  141. &lt;th&gt;ID&lt;/th&gt;
  142. &lt;th&gt;Nombre&lt;/th&gt;
  143. &lt;th&gt;Cantidad&lt;/th&gt;
  144. &lt;/tr&gt;
  145. &lt;tr&gt;
  146. &lt;th&gt;ID&lt;/th&gt;
  147. &lt;th&gt;Nombre&lt;/th&gt;
  148. &lt;th&gt;Cantidad&lt;/th&gt;
  149. &lt;/tr&gt;
  150. &lt;tr&gt;
  151. &lt;th&gt;ID&lt;/th&gt;
  152. &lt;th&gt;Nombre&lt;/th&gt;
  153. &lt;th&gt;Cantidad&lt;/th&gt;
  154. &lt;/tr&gt;
  155. &lt;tr&gt;
  156. &lt;th&gt;ID&lt;/th&gt;
  157. &lt;th&gt;Nombre&lt;/th&gt;
  158. &lt;th&gt;Cantidad&lt;/th&gt;
  159. &lt;/tr&gt;
  160. &lt;tr&gt;
  161. &lt;th&gt;ID&lt;/th&gt;
  162. &lt;th&gt;Nombre&lt;/th&gt;
  163. &lt;th&gt;Cantidad&lt;/th&gt;
  164. &lt;/tr&gt;
  165. &lt;tr&gt;
  166. &lt;th&gt;ID&lt;/th&gt;
  167. &lt;th&gt;Nombre&lt;/th&gt;
  168. &lt;th&gt;Cantidad&lt;/th&gt;
  169. &lt;/tr&gt;
  170. &lt;tr&gt;
  171. &lt;th&gt;ID&lt;/th&gt;
  172. &lt;th&gt;Nombre&lt;/th&gt;
  173. &lt;th&gt;Cantidad&lt;/th&gt;
  174. &lt;/tr&gt;
  175. &lt;tr&gt;
  176. &lt;th&gt;ID&lt;/th&gt;
  177. &lt;th&gt;Nombre&lt;/th&gt;
  178. &lt;th&gt;Cantidad&lt;/th&gt;
  179. &lt;/tr&gt;
  180. &lt;tr&gt;
  181. &lt;th&gt;ID&lt;/th&gt;
  182. &lt;th&gt;Nombre&lt;/th&gt;
  183. &lt;th&gt;Cantidad&lt;/th&gt;
  184. &lt;/tr&gt;
  185. &lt;/table&gt;
  186. &lt;/div&gt;
  187. &lt;/div&gt;
  188. &lt;/body&gt;
  189. &lt;style&gt;
  190. body {
  191. background: black;
  192. }
  193. .container {
  194. height: 50vh;
  195. overflow-y: auto;
  196. }
  197. .table-div {
  198. display: flex;
  199. justify-content: center;
  200. align-items: center;
  201. flex-direction: column;
  202. padding: 50px;
  203. rheight: 50vh;
  204. overflow-y: auto;
  205. overflow-x: hidden;
  206. }
  207. table {
  208. min-width: 15vw;
  209. border: 1px solid white;
  210. color: white;
  211. border-collapse: collapse;
  212. }
  213. th {
  214. text-align: left;
  215. padding-left: 10px;
  216. padding-right: 20px;
  217. border: 1px solid white;
  218. }
  219. td {
  220. padding-left: 10px;
  221. padding-right: 20px;
  222. border: 1px solid white;
  223. }
  224. &lt;/style&gt;

<!-- end snippet -->

答案2

得分: 0

我遇到了同样的问题。尝试更改高度。如果这不起作用，请提供一个示例输出，我肯定可以帮助您。滚动始终与高度有关。

  1. .table-div {
  2.     display: flex;
  3.     justify-content: center;
  4.     align-items: center;
  5.     flex-direction: column;
  6.     padding: 50px;
  7.     height: 80vh;
  8.     overflow-y: auto;
  9.     overflow-x: hidden;
  10. }
英文:

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.

  1. .table-div{
  2. display: flex;
  3. justify-content: center;
  4. align-items: center;
  5. flex-direction: column;
  6. padding: 50px;
  7. height: 80vh;
  8. overflow-y: auto;
  9. overflow-x: hidden;
  10. }

huangapple
  • 本文由 发表于 2023年5月28日 09:25:04
  • 转载请务必保留本文链接：https://go.coder-hub.com/76349616.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定