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

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -