如何实现PHP数据库查询结果按非重复finit分组表格展示

嘿，看你的代码就知道问题出在哪了——HTML表格结构不规范！你当前的循环里，要么输出一个只包含finit的<tr>，要么直接扔出<td>标签，但这些<td>没有被正确包裹在<tr>里，浏览器解析时自然会乱掉布局。

问题根源拆解 #

原代码里，当finit变化时你输出了：

echo '<tr><td>'.$rows['finit'].'</td></tr>';

但后续的disc和size的<td>直接被输出，没有对应的<tr>包裹，这完全不符合HTML表格的嵌套规则（必须是<table>→<tr>→<td>的层级），所以浏览器只能自动补全结构，导致内容横向乱排。

修正方案：先分组数据，再规范渲染 #

我推荐先把查询结果按finit分组，这样逻辑更清晰，也能轻松实现“同一Material只显示一次”的需求，同时保证表格结构完全合规。

完整修正代码

<?php 
include("connect.php"); 
$query = "SELECT * FROM prime ORDER BY finit ASC"; 
$info = mysqli_query($conn, $query); 

// 第一步：按finit分组数据
$groupedData = [];
while($rows = mysqli_fetch_assoc($info)) {
    $finit = $rows['finit'];
    // 如果当前finit还没在分组数组里，初始化空数组
    if(!isset($groupedData[$finit])) {
        $groupedData[$finit] = [];
    }
    // 将当前行的disc和size存入对应分组
    $groupedData[$finit][] = [
        'disc' => $rows['disc'],
        'size' => $rows['size']
    ];
}
?>

<table class="table table-striped">
    <tr>
        <th>Material</th>
        <th>Description</th>
        <th>Dimension</th>
    </tr>
    <?php 
    // 遍历每个分组（每个finit对应一组）
    foreach($groupedData as $finit => $items): 
        // 获取当前finit下的记录总数，用于rowspan合并单元格
        $itemCount = count($items);
    ?>
        <?php 
        // 遍历当前分组内的每条disc和size记录
        foreach($items as $index => $item): 
        ?>
            <tr>
                <?php 
                // 只在当前分组的第一条记录里显示finit，并用rowspan合并所有行
                if($index === 0): 
                ?>
                    <td rowspan="<?php echo $itemCount; ?>"><?php echo htmlspecialchars($finit); ?></td>
                <?php endif; ?>
                <td><?php echo htmlspecialchars($item['disc']); ?></td>
                <td><?php echo htmlspecialchars($item['size']); ?></td>
            </tr>
        <?php endforeach; ?>
    <?php endforeach; ?>
</table>
</div>
</body>
</html>

关键改进点 #

1. 数据分组：先把相同finit的记录归为一组，避免循环里复杂的状态判断，逻辑更直观。
2. 合规的表格结构：所有<td>都被包裹在<tr>里，完全符合HTML规范。
3. 单元格合并：用rowspan属性让finit单元格跨越当前分组的所有行，实现“仅显示一次”的效果，同时表格布局整齐。
4. 安全输出：用htmlspecialchars()转义输出内容，避免XSS攻击（这是开发中的好习惯哦）。

这样修改后，你的表格就会变成：每个Material只在第一行显示，下面对应多行描述和尺寸，完美符合你的需求~

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