html - 如何将表格与容器顶部对齐？

Question

我在 HTML div 中嵌入了一个 PHP MySQL 查询，但循环的结果(表格)与底部对齐。有什么方法可以将表格移动到 div 的顶部？这是代码:

<div style="background-color:yellow; display:inline-table; float:left; max-width:90%; height:auto; text-align:top; left:0; right:0; margin:auto; position:absolute;">
<?php
$agent = $_COOKIE['user'];
$server = "*******";
$user = "*******";
$pass = "*******";
$baza = "balkandi_order";
$con = mysqli_connect($server, $user, $pass, $baza) or die("conexiune    nereusita");
$sql= "SELECT * FROM tab_order WHERE agent='$agent'";
$rezultat = mysqli_query($con, $sql);
echo '<table cellpadding="5" cellspacing="0" margin-top="0" max-width="0%" margin="auto" border="1px">';
echo '<tr><th>Data</th><th>Agent</th><th>Product</th><th>Quantity</th></tr>';
while ($row = mysqli_fetch_assoc($rezultat)) {
    echo '<tr>';
    echo '<td>';
    echo $row['data'];
    echo '</td>';
    echo '<td>';
    echo $row['agent'];
    echo '</td>';
    echo '<td>';
    echo $row['product'];
    echo '</td>';
    echo '<td>';
    echo $row['qty'];
    echo '</td>';
    echo '</tr>';
    echo "<br>";
} 
echo "</table>";
mysqli_close($con);
?>
</div>

Answer 1

如果您不关心学习如何改进，请跳到第 3 步并忽略其余部分。不过，我确实鼓励您通读整篇文章!

第 1 步:清理

此代码一团糟，如果您需要再次触摸它，更改起来会很痛苦。把它分成几 block 。首先我们提取 CSS:

样式.css:

.container {
   background-color: yellow; 
   display: inline-table; 
   float: left;
   max-width: 90%;
   height: auto;
   text-align: top;
   left: 0;
   right: 0;
   margin: auto;
   position: absolute;
}
.container table {
   max-width: 0;
   border: 1px #000 solid;
   border-collapse: collapse;
}
.container table td {
   padding: 5px;
}

template.php:

<div class="container">
   <table>
      <tr>
         <th>Data</th>
         <th>Agent</th>
         <th>Product</th>
         <th>Quantity</th>
      </tr>
      <?php foreach ($tableEntries as $row): ?>
      <tr>
         <td><?php echo $row['data'] ?></td>
         <td><?php echo $row['agent'] ?></td>
         <td><?php echo $row['product'] ?></td>
         <td><?php echo $row['qty'] ?></td>
      </tr>
      <?php endforeach ?>
   </table>
</div>

index.php:

<?php
$agent = $_COOKIE['user'];
$server = "*******";
$user = "*******";
$pass = "*******";
$baza = "balkandi_order";
$con = mysqli_connect($server, $user, $pass, $baza) or die("conexiune    nereusita");
$sql= "SELECT * FROM tab_order WHERE agent='$agent'";
$rezultat = mysqli_query($con, $sql);
$tableEntries = array();
while ($row = mysqli_fetch_assoc($rezultat)) {
   $tableEntries[] = $row;
}
include("template.php");

看起来好多了，不是吗？现在一切都各就各位，您可以真正看到发生了什么。

第 2 步:修复重要问题

您正在使用 MySQLi，这很好。但是你没有正确使用它。您使用来自 cookie 的值并将其直接交给您的数据库。这使您的应用程序容易受到 SQL 注入(inject)攻击，因为任何人都可以修改 cookie 并将恶意代码放入其中。因此，让我们使用准备好的语句来解决此问题:

index.php:

<?php
// skipping the variable declarations (see above)
$con = mysqli_connect($server, $user, $pass, $baza) or die("conexiune    nereusita");
// prepare a statement with a placeholder for the agent variable
$stmt = mysqli_prepare("
   SELECT data, agent, product, qty
   FROM   tab_order
   WHERE  agent = ?");
// now we set the value for the placeholder
$stmt->bind_param('s', $agent);
$stmt->execute();
$rezultat = $stmt->get_result();
$tableEntries = array();
while ($row = $result->fetch_assoc()) {
   $tableEntries[] = $row;
}
include("template.php");

第 3 步:修复样式

现在我们已经大致了解了您的操作，让我们检查一下为什么您的表格与您想要的对齐方式不同。你真的确定你需要所有这些 CSS 属性吗？我对此表示怀疑。据我所知，你几乎不需要这些。但是你没有提供更多信息，比如它的用途、周围环境等等。因此，我在这里可能完全错了。无论如何，让我们调整样式表:

样式.css:

.container {
   background-color: yellow; 
   display: block; 
   float: left;
   max-width: 90%;
   margin: auto;
}
.container table {
   border: 1px #000 solid;
   border-collapse: collapse;
}
.container table td {
   padding: 5px;
}

第四步:启蒙

我希望您注意到花点时间正确构建一个应用程序(即使是一个小应用程序)会带来多大的不同。它使您可以清楚地关注问题，而不是寻找正确的地方来解决问题。另外，请花一些时间了解有关您正在使用的技术的更多详细信息。在您的原始代码中有很多不正确的元素，例如不存在的 HTML 属性 max-width。如果您坐下来学习基础知识，这会让您的生活轻松很多。