HTML/PHP table keeps expanding page

HTML & CSS
1

I have the below code and I’m looking to limit how large the box is and have it be able to scroll if the rows expand past that. I may be doing this wrong so any pointers is greatly appreciated! Right now, it pushes the page down well past the footer due to how many records are in the database…

        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="header">
                                <h4 class="title">Current Vendors</h4>
                                <p class="category">Vendors listed as active within VendorBase.</p>
                            </div>

							<?php
							$con=mysqli_connect("localhost","root","test","vendors");
							// Check connection
							if (mysqli_connect_errno())
							{
							echo "Failed to connect to MySQL: " . mysqli_connect_error();
							}

							$result = mysqli_query($con,"SELECT * FROM vendor_data");

							echo "<div class='content table-responsive table-full-width'>
															<table class='table table-hover'>
																<thead>
																	<th>Name</th>
																	<th>Type</th>
																	<th>Company</th>
																	<th>Email</th>
																	<th>SOC2 Report</th>
																	<th>Status</th>
																	


																</thead>
																";
																
																while($row = mysqli_fetch_array($result))
																{
															
																echo "<tr>";
																echo "<td>" . $row['name'] . "</td>";
																echo "<td>" . $row['type'] . "</td>";
																echo "<td>" . $row['company'] . "</td>";
																echo "<td>" . $row['email'] . "</td>";
																echo "<td>" . $row['soc'] . "</td>";
																echo "<td>" . $row['status'] . "</td>";							
																echo "</tr>";
																}
															
														echo "</table>";
											    echo "</div>";
																mysqli_close($con);
							?>
                                </table>

                            </div>
                        </div>
                    </div>




                </div>
            </div>

        </div>
2

Try this as a quick fix:

<div style="height: 15em; overflow: scroll; padding: 1em;">  
<table >
<thead>
  <th>Name</th>
  <th>Type</th>
  <th>Company</th>
  <th>Email</th>
  <th>SOC2 Report</th>
  <th>Status</th>
</thead>

<tr>  <td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td> </tr>
<tr>  <td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td> </tr>
<tr>  <td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td><td>asdf</td> </tr>
...
...
</table>
</div>
3

That seems to display what I’m ultimately looking for. Where did I go wrong in my code then?

4

Scratch that. Appears I must have been missing something with the styles, after adding it to mine it works perfectly. Thank you!

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.