PHP中如何垂直对齐SQL查询返回的数据实现table-cell布局效果

你当前用<p>标签拼接<br>换行输出内容的方式，无法实现字段标题和值的列对齐效果。要实现table-cell式的垂直对齐，最直接的方案是使用结构化的表格标签输出数据，同时将CSS样式从PHP输出逻辑中抽离，避免冗余的内联样式。

实现要点 #

• 不要在echo语句中重复写内联样式，将所有样式统一写到独立的<style>块中，便于维护
• 输出用户数据时使用原生<table>结构，浏览器默认对表格单元格使用table-cell布局，天然支持同列内容垂直对齐，不需要额外写定位样式
• 给字段标题列设置固定宽度，保证所有行的标题（ID/Username/Name/Surname）完全对齐
• 修复原有代码的问题：未闭合的<p>标签、重复定义的font-size属性

完整修改代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        .user-list {
            border-collapse: collapse;
            margin: 30px;
            margin-top: 35px;
            font-size: 40px;
            font-weight: bold;
            text-align: left;
            text-shadow: 0px 5px 12px #333;
        }
        .user-list td {
            padding: 6px 10px;
            vertical-align: top;
        }
        .field-name {
            width: 190px; /* 固定标题列宽度，保证对齐 */
        }
        .user-sep {
            height: 25px; /* 不同用户数据之间的分隔间距 */
        }
    </style>
</head>
<body>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "shopping_list_users";

// 建立数据库连接
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT id, username, name, surname FROM users";
$result = $conn->query($sql);

if ($result !== false && $result->num_rows > 0) {
    echo '<table class="user-list">';
    while($row = $result->fetch_assoc()) {
        echo '<tr>
                <td class="field-name">ID:</td>
                <td>'.$row["id"].'</td>
              </tr>
              <tr>
                <td class="field-name">Username:</td>
                <td>'.$row["username"].'</td>
              </tr>
              <tr>
                <td class="field-name">Name:</td>
                <td>'.$row["name"].'</td>
              </tr>
              <tr>
                <td class="field-name">Surname:</td>
                <td>'.$row["surname"].'</td>
              </tr>
              <tr><td colspan="2" class="user-sep"></td></tr>';
    }
    echo '</table>';
} else {
    echo "0 results";
}
$conn->close();
?>
</body>
</html>

如果不想使用原生table标签，也可以给普通div块设置display: table、display: table-row、display: table-cell模拟表格布局，对齐效果完全一致，但原生table更适合展示这类结构化的二维数据，代码复杂度更低。

内容的提问来源于stack exchange，提问作者R3nrs