css - Setting Height and Width Boundaries for HTML Table -
i have table pulling in long columns of data database. issue table spans entire width , length of page, , displays on footer. here formatting looks like:
http://test.ishabagha.com/classic_cars/customer_entry.php
i created div
(div id="table2")
in set boundaries in how far table should stretch vertically , horizontally. added padding: 50px
there space above footer, padding being applied top of table. here style added (i changed height , width multiple px
test if size of table change, not):
<style> #table2{ width: 100px; height: 50px; padding: 50px; } </style>
i table shrink smaller size. appreciate letting me know why content in div id="table2"
not allow set height/width/padding of table, , why overwriting footer.
here 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 customers order 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>
i recommend separate business logic (php, javascript, etc) presentation , focus on css part, essential.
in order make table scrollable vertically, insert div
element , set property of element: overflow-y:scroll
.
to make table fit horizontally, set it's width:100%
(or less) , specify relative width of td
elements.
hope help. best regards,
Comments
Post a Comment