I am experiencing an issue where the Flex table is not displaying more than 50 rows

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!

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

Answer №1

To create a scrollable table with just half the height visible at any given time, you can place everything in a container that is 50vh high and enable scrolling within it. This allows the table, along with its outer div, to expand as needed.

Here's a straightforward example:

<html>
  <div class="container">
    <div class="table-div">
      <table>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Quantity</th>
        </tr>
        <!-- Add more rows here -->
      </table>
    </div>
  </div>
</html>

Answer №2

Experiencing a similar issue myself. Have you tried adjusting the height settings? If that doesn't resolve the problem, feel free to share an example output with me and I'll do my best to offer assistance. The scroll feature is typically tied to the height of the element.

.content-area{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 40px;
    height: 75vh;
    overflow-y: auto;
    overflow-x: hidden;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

arranging <li> elements in alphabetical order

I'm looking for a way to alphabetically sort an unordered list while still keeping the outer html intact. My current method sorts the list alphabetically, but it only reorganizes the inner html of the list elements and not the entire element itself. T ...

fixed width div with width proportion

experts. I'm currently experimenting with a spinning cube effect for my gallery and I recently came across Paul Hayes' experimental cube on his website (it's best viewed in Google Chrome). However, I am facing a challenge in getting it to w ...

Retrieving HTML content from an AJAX request

Is it possible to query HTML data returned from an AJAX request? I attempted the following code: $.post("gethtml.php", { url: $url.val() }, function(data) { var $html = $(data), $links = $("link, script, style", $html), $body ...

Learn the process of creating various themes with Tailwind CSS

When exploring Tailwind CSS, it appears that specific colors need to be specified in classes like this: <div class="bg-yellow-200 dark:bg-gray-800"></div> However, I am interested in offering 10 different themes for users to choose f ...

Dragging and dropping an HTML canvas element causes its width and height to be reset to zero

I am currently developing a customizable dashboard that allows users to rearrange dashboard tiles (represented by div elements) and position them anywhere within the dashboard. HTML Structure The HTML structure is outlined in the snippet below: <div cl ...

Is there a way to enable Fancybox to change to the adjacent gallery by simply using the 'up' or 'down' arrow keys?

I am currently working on a layout that consists of a vertical column of thumbnail images, each linked to its own gallery with additional images. When the user clicks on a thumbnail image, Fancybox opens, allowing them to navigate through the images within ...

Checking for the presence of an element prior to moving forward in a selenium and python script

Is there a way to create a loop that runs as long as a specific div element appears on a website? I am trying to navigate through several pages and click the "next" button for each page. The last page does not have the div element I am looking for, so I w ...

TabContainer - streamline your selection process with inline tabs

I am currently working on a GUI that includes a TabContainer with two tabs, each containing a different datagrid. I initially created the tabcontainer divs and datagrids declaratively in HTML for simplicity, but I am open to changing this approach if it wo ...

Smooth transitions between points in animations using the D3 easing function

I'm working on an animated line chart that displays data related to play activities. I've been experimenting with changing the animation style between data points on the chart using d3.ease Currently, my code looks like this: path .attr("stro ...

implementing jquery for dynamic pop up placement

When I click the English button, a pop-up appears, but I can only see the full contents of the pop-up after scrolling down. Is there any way to view the entire pop-up without scrolling? Below is the code that I am using: http://jsfiddle.net/6QXGG/130/ Or ...

Tips for preventing text from changing its padding within a div when reducing the width and height dimensions

I am facing an issue with a div inside another div. The child div contains text, and when I apply animation to decrease the width and height, the text inside gets reset according to the new size. While I understand why this happens, I want to find a way to ...

Is it possible for jQuery to execute in a sequential manner?

Below is the code I am working with: https://jsfiddle.net/c4zquo60/1/ CSS: #bg { background-repeat: no-repeat; position: absolute; top:0; bottom:0; left:0; right:0; width:100wh; height:100vh; z-index: -1; opacity: ...

Display content from an external HTML page within a div using Ionic

Currently, I am facing an issue where I am utilizing [innerHtml] to populate content from an external HTML page within my Ionic app. However, instead of loading the desired HTML page, only the URL is being displayed on the screen. I do not wish to resort t ...

Adjusting the line-height in CSS dynamically based on the length of characters using jQuery

I am facing an issue with the Twitter widget on my website where our company's latest tweet sometimes gets cut off if it exceeds a certain length. I want to dynamically adjust the line-height CSS property of the element based on the tweet's chara ...

In what ways can you toggle the visibility of table rows and data dynamically with the onchange event in HTML?

I'm dealing with an HTML code that can dynamically change table data based on user selection. Here's the snippet of my HTML code: Select an option: <select name='set' id="set" class="selectpicker" onchange='displayFields(this. ...

Bootstrap 3 Implementation of a Clear Navbar

I'm trying to create a transparent navbar using the code below: <div class="navbar navbar-default navbar-fixed-top" style="top:50px; background:transparent;"> <div class="navbar-inner"> <div class="container"> <ul cla ...

Creating a responsive design for a cropped image using CSS

Hi there! I am using a cropped image as the background for the top of my webpage, with a fixed size defined in pixels for the containing div. The issue arises when I resize the browser window, causing the image to cover most of the page instead of just the ...

Tips for Showing Certain Slides When the Page Loads

When using jQuery filter effects to organize div slides on a page, I encountered an issue where all the divs containing different slides are displayed on page load instead of just the default chosen ['active'] div. The filter effect itself is fun ...

Invoke the designated JavaScript function within a subordinate <frame>

Below is an example of the standard HTML structure for a parent page named "index.html": <html> <head> <title>test title</title> </head> <frameset cols="150,*"> <frame name="left" src="testleft.html"> ...

What could be the reason for the function providing the value of just the initial input?

Why am I only getting "White" when I click on the colors? I can't seem to get any other values to appear on the screen. I'm confused about what mistake I might be making here. var x = document.getElementById("mySelect").value; function myFunc ...