设置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>回答 2
Stack Overflow用户
发布于 2015-06-01 06:20:47
我建议将你的业务逻辑(PHP，Javascript等)从展示中分离出来，并专注于CSS部分，这是必不可少的。
为了使表格可以垂直滚动，将其插入到div元素中，并设置该元素的属性：overflow-y:scroll。
要使表格水平适配，请设置它的width:100% (或更小)并指定其td元素的相对宽度。
希望这能有所帮助。诚挚的问候,
Stack Overflow用户
发布于 2015-06-01 06:28:58
首先，您的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;，您将获得滚动条而不是溢出，这意味着您的表格永远不会在您的页脚下流动。
最后，您可能希望设置表的样式以使其看起来更好，但由于没有明确的解决方案，因此我避免使用示例。
https://stackoverflow.com/questions/30563263
复制相似问题
腾讯云开发者
