Настройка границ высоты и ширины для таблицы HTML

У меня есть таблица, которая тянет длинные столбцы данных из моей базы данных. Проблема заключается в том, что таблица охватывает всю ширину и длину страницы и отображается над нижним колонтитулом. Вот что форматирование выглядит следующим образом:Настройка границ высоты и ширины для таблицы HTML

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

Я создал div(div id="table2"), в котором я установить границы в том, как далеко таблица должна растягиваться по вертикали и по горизонтали. Я добавил padding: 50px, так что над нижним колонтитулом будет пространство, но прокладка применяется только к верхней части таблицы. Вот стиль, который я добавил (я изменил высоту и ширину нескольких px, чтобы проверить, если размер таблицы будет меняться, но это не делает):

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

Я хотел бы таблицу, чтобы уменьшить до меньшего размера размер. Я был бы признателен, если бы кто-нибудь дал мне понять, почему мой контент в div id="table2" не позволит мне установить высоту/ширину/заполнение таблицы и почему она переписывает нижний колонтитул.

Вот, пожалуйста, весь код.

<?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>

источник

2015-05-31 Anonymous

Я бы рекомендовал отделить вашу бизнес-логику (PHP, Javascript и т. Д.) От презентации и сосредоточиться на части CSS, что очень важно.

Чтобы сделать таблицу прокручиваемой вертикально, вставьте ее в элемент div и установите свойство этого элемента: overflow-y:scroll.

Чтобы сделать стол горизонтальным, установите его width:100% (или меньше) и укажите относительную ширину его элементов td.

Надеюсь, это поможет. С уважением,

источник

2015-05-31 22:20:47

Во-первых, ваш div имеет указанные размеры. Однако таблица переполняет div. Я предполагаю, что вы хотите, чтобы нижний колонтитул всегда был внизу, но контент никогда не течет ниже него. Ну, вам нужен ящик для размещения вашего контента для этого.

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 */ 
}

Что это делает, чтобы сделать #table2 потреблять все пространство, которое он может получить, без перелива высоты окна просмотра. Теперь, когда контент в #table2 больше самого div, он будет переполняться. Однако, установив overflow: auto;, вы получите полосы прокрутки вместо переполнения, что означает, что ваша таблица никогда не может течь под нижним колонтитулом.

Наконец, вы можете захотеть, чтобы ваш стол выглядел лучше, но поскольку нет определенного решения, я воздержался от включения примера.

источник

2015-05-31 22:28:57 Cu3PO42

Настройка границ высоты и ширины для таблицы HTML

ответ

Смежные вопросы