Setting Height and Width Boundaries for HTML Table

Question

I have a table pulling in long columns of data from my database. The issue is that the table spans the entire width and length of the page, and displays over my footer. Here is what the formatting looks like:

http://test.ishabagha.com/classic_cars/customer_entry.php

I created a div (div id="table2") in which I set boundaries in how far the table should stretch vertically and horizontally. I added padding: 50px so that there would be space above the footer, but the padding is only being applied to the top of the table. Here is the style I added (I changed the height and width to multiple px to test if the size of the table would change, but it does not):

<style>
    #table2{
        width: 100px;
        height: 50px;
        padding: 50px;
    }
</style>

I would like the table to shrink to a smaller size. I would appreciate anyone letting me know why my content in the div id="table2" will not allow my to set the height/width/padding of the table, and why it is overwriting the footer.

Here is the whole code, if needed.

<?php
require_once("./includes/database_connection.php");

error_reporting(E_ALL);
ini_set('display_errors', 1);

$query = "SELECT customerNumber, customerName, contactLastName, contactFirstName, phone, addressLine1, addressLine2, city, state, postalCode, country, salesRepEmployeeNumber, creditLimit FROM customers ORDER BY customerNumber ASC";

$result = mysqli_query($dbc, $query)
    or die ('Error querying database');
?>

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Home</title>
    <link type="text/css" rel="stylesheet" href="classic_cars.css" />

    <style>
        #table2{
            width: 100px;
            height: 50px;
            padding: 50px;
        }
    </style>
</head>
<div>
<body>
    <?php
        require_once("./includes/navigation.php");
    ?>
    <div id="table2">
    <table border= "1"> 
        <tr>    
            <td>customerNumber</td>
            <td>customerName</td>
            <td>contactLastName</td>
            <td>contactFirstName</td>
            <td>phone</td>
            <td>addressLine1</td>
            <td>addressLine2</td>
            <td>city</td>
            <td>state</td>
            <td>postalCode</td>
            <td>country</td>
            <td>salesRepEmployeeNumber</td>
            <td>creditLimit</td>
        </tr>
    <?php 

    while($row = mysqli_fetch_array($result)) {

        $customer_number = $row['customerNumber'];
        $customer_name = $row['customerName']; 
        $contact_last_name = $row['contactLastName']; 
        $contact_first_name = $row['contactFirstName']; 
        $phone_number = $row['phone']; 
        $address_1 = $row['addressLine1']; 
        $address_2 = $row['addressLine2']; 
        $city = $row['city']; 
        $state = $row['state']; 
        $postal_code = $row['postalCode']; 
        $country = $row['country']; 
        $salesrep_number = $row['salesRepEmployeeNumber']; 
        $credit_limit = $row['creditLimit']; 

    echo "<tr>
            <td>$customer_number</td>
            <td>$customer_name</td>
            <td>$contact_last_name</td>
            <td>$contact_first_name</td>
            <td>$phone_number</td>
            <td>$address_1</td>
            <td>$address_2</td>
            <td>$city </td>
            <td>$state</td>
            <td>$postal_code</td>
            <td>$country</td>
            <td>$salesrep_number</td>
            <td>$credit_limit</td>
         </tr>";

        } // end while loop  
    ?>

    </table>    
    </div>

    <?php
        require_once("./includes/footer.php");
    ?>  

</body>
</html>

score 0 · Answer 1 · answered May 31 '15 at 22:20

I would recommend to separate your business logic (PHP, Javascript, etc) from presentation and focus on CSS part, which is essential.

In order to make the table scrollable vertically, insert it into div element and set the property of that element: overflow-y:scroll.

To make the table fit horizontally, set it's width:100% (or less) and specify the relative width of its td elements.

Hope this will help. Best regards,

score 0 · Answer 2 · answered May 31 '15 at 22:28

Firstly, your div has exactly the dimensions you specify. However, the table overflows the div. I presume you want the footer always at the bottom, but the content never to flow below it. Well, you need a box to put your content in for that.

body > div {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

#footer_style {
    padding: 20px; /* remove all of your other rules for this element */
}

#table2 {
    flex: 1;
    overflow: auto;
    padding: 50px; /* remove all of your other rules for this element */
}

What this does, is to make #table2 consume all the space it can get, without overflowing the viewport height. Now when content in #table2 is bigger than the div itself, it will overflow. However, by setting overflow: auto; you will get scroll bars instead of an overflow, which means your table can never flow under your footer.

Finally you may want to style your table to look better, but since there is no definite solution to that, I have refrained from including an example.

Setting Height and Width Boundaries for HTML Table

2 Answers2