I cannot make my dynamically created table scroll when overflowed

Question

I am using a CSS table from here: https://codepen.io/florantara/pen/dROvdb.

I am loading cars from an inventory. However, sometimes there are too many cars and the table is too large for the page. I have tried wrapping the table in another div and setting a max height, overflow, and y-overflow. I have tried other methods on StackOverflow and have not been able to figure it out. I am very new to HTML and CSS and am only using it for this project. The code I have is here:

<div class="table-wrapper">
    <table class="fl-table">
         <?php

            $user = 'root';
            $pass = '';
            $db = 'automobile';
            
            if(isset($_GET["location"]))
            {
                $data = $_GET["location"];
            }

            $conn = new mysqli('localhost', $user, $pass, $db) or die("Unable to connect");
            

            $sql = "select make,model,style,color from cars where vin in (
                    select vin from dealership_inventory where dealership_id in (
                    select dealership_id from dealership where state = '{$data}'));";
                    
            $result = mysqli_query($conn, $sql);
             
            if (!$result) {
                die("Query to show fields from table failed");
            }

            $fields_num = mysqli_num_fields($result);

            echo "<thead>";
            echo "<tr>";
            for($i=0; $i<$fields_num; $i++)
            {
                $field = mysqli_fetch_field($result);
                echo "<th>" . $field->name . "</th>";
            }
            echo "</tr>\n";
            echo "</thead>";
            while($row = mysqli_fetch_row($result))
            {
                echo "<tr>";


                foreach($row as $cell)
                    echo "<td>$cell</td>";

                echo "</tr>\n";
            }
        ?>
    </table>
</div>

I'm not sure if you also need me to include the CSS file but it is available in the link I provided. Thank you for your help!

If you have too much data to display, HTML table will not do the job. May be display data as a grid of element — gausoft, Apr 23 '22 at 09:06
**Warning:** You are wide open to [SQL Injections](https://php.net/manual/en/security.database.sql-injection.php) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/32391315) — Dharman, Apr 23 '22 at 13:27

Siebe Jongebloed · Answer 1 · 2022-04-24T05:40:08.677

0

Add some height to your wrapper and set overflow to auto.

I.e. like this:

.table-wrapper{
    height:50px;
    overflow:auto;
    margin: 10px 70px 70px;
    box-shadow: 0px 35px 50px rgba( 0, 0, 0, 0.2 );
}

Hier is link to a demo

I cannot make my dynamically created table scroll when overflowed

1 Answers1