PHP动态生成Bootstrap表格样式丢失问题解析与优化实践

在使用php从mysql数据库动态生成bootstrap表格时，常见的问题是表格样式（如`.table-striped`）无法正常显示。这通常是由于html结构不正确，特别是重复创建`

1. 问题现象与根源分析

当开发者尝试使用PHP从数据库中获取数据并构建一个Bootstrap风格的表格时，可能会遇到一个令人困惑的现象：纯HTML编写的表格能够正常显示Bootstrap样式，但通过PHP动态生成的表格却失去了所有样式。

常见错误示例代码分析：

<?php
$result = mysqli_query($link,"SELECT * FROM users ORDER BY id ASC");

echo "<table class='table table-striped'>
<thead>
<tr>
<th>#</th>
<th>Username</th>
<th>Rank</th>
<th>Created at</th>
</tr>
</thead>";

while($row = mysqli_fetch_array($result))
{
echo "<tbody>"; // 错误：在循环内部重复创建 <tbody>
echo "<tr>";
echo "<td>" . $row['id'] . "</td>";
echo "<td>" . $row['username'] . "</td>";
echo "<td>" . $row['rank'] . "</td>";
echo "<td>" . $row['created_at'] . "</td>";
echo "</tr>";
echo " </tbody>"; // 错误：在循环内部重复关闭 <tbody>
}
echo "</table>";

mysqli_close($link);
?>

上述代码的问题在于，

<table class='table table-striped'>
    <thead>...</thead>
    <tbody><tr><td>39</td><td></td><td>julia</td><td>2021-12-20 00:42:14</td></tr></tbody>
    <tbody><tr><td>40</td><td>test</td><td>user</td><td>2021-12-20 02:35:37</td></tr></tbody>
    <tbody><tr><td>41</td><td>testt</td><td>user</td><td>2021-12-20 17:22:43</td></tr></tbody>
</table>

这种多个

立即学习“PHP免费学习笔记（深入）”；

Quinvio AI

AI辅助下快速创建视频，虚拟代言人

下载

2. 正确的PHP动态生成Bootstrap表格实践

解决此问题的核心在于确保生成的HTML结构符合标准，特别是

优化后的PHP代码示例：

<?php
// 假设 $link 已经通过 mysqli_connect() 成功建立数据库连接

// 1. 执行数据库查询
$result = mysqli_query($link, "SELECT * FROM users ORDER BY id ASC");

// 2. 初始化一个字符串变量来构建完整的HTML输出
$output = "<div class='table-responsive'>
    <table class='table table-striped'>
        <thead>
            <tr>
                <th style='background-color:#ad8c70'>#</th>
                <th style='background-color:#ad8c70'>Username</th>
                <th style='background-color:#ad8c70'>Rank</th>
                <th style='background-color:#ad8c70'>Created at</th>
            </tr>
        </thead>
        <tbody>"; // 正确：在循环外部开始 <tbody> 标签

// 3. 遍历查询结果，为每一行数据生成 <tr> 和 <td>
while($row = mysqli_fetch_array($result))
{
    $output .= "<tr>
        <td>" . htmlspecialchars($row['id']) . "</td>
        <td>" . htmlspecialchars($row['username']) . "</td>
        <td>" . htmlspecialchars($row['rank']) . "</td>
        <td>" . htmlspecialchars($row['created_at']) . "</td>
    </tr>";
}

// 4. 关闭数据库连接（在所有数据处理完毕后）
mysqli_close($link);

// 5. 在循环结束后关闭 <tbody> 和 <table> 标签
$output .= '</tbody>
    </table>
</div>';

// 6. 一次性输出所有构建好的HTML内容
echo $output;
?>

代码解释与最佳实践：