PHP如何遍历数组动态渲染对齐各分支费率的HTML布局

现有数据结构 #

分支配置数组 #

$branch = [
    '7232' => [
        'name' => 'United State Branch',
        'branch_id' => 7232
    ],
    '5431' => [
        'name' => 'Brazil Branch',
        'branch_id' => 5431
    ]
];

需求为遍历$branch数组时，拉取对应分支的费率数据，参照示例图样式整齐对齐展示，解决循环输出时内容错位不对齐的问题。

数据库查询得到的费率示例数据如下：

$getRate = [
    '0' => [
        'kg' => '1',
        'amount' => 50,
        'branch_id' => 7232
    ],
    '1' => [
        'kg' => '2',
        'amount' => 110,
        'branch_id' => 7232
    ]
];

具体实现 #

别折腾flex、浮动手动调间距凑对齐，做这种规整的二维行列数据展示，原生HTML表格是兼容性最好、实现成本最低的方案，天然对齐不会错位，配合rowspan合并单元格就能实现示例里分支名跨多行显示的效果。

第一步：预处理费率数据 #

先把查询出来的费率按分支ID分组，避免渲染时重复遍历数组，提升性能：

$groupedRate = [];
foreach ($getRate as $rate) {
    $groupedRate[$rate['branch_id']][] = $rate;
}

第二步：循环渲染页面 #

加几行简单样式控制边框和间距，直接循环输出表格内容即可：

<style>
.rate-table {
    border-collapse: collapse;
    width: 100%;
    margin: 12px 0;
}
.rate-table th, .rate-table td {
    border: 1px solid #e5e5e5;
    padding: 8px 15px;
    text-align: left;
}
.rate-table th {
    background: #f5f5f5;
}
.branch-name {
    font-weight: 600;
    background: #fafafa;
}
</style>

<table class="rate-table">
    <thead>
        <tr>
            <th>分支名称</th>
            <th>重量(kg)</th>
            <th>费率金额</th>
        </tr>
    </thead>
    <tbody>
        <?php foreach ($branch as $item): ?>
            <?php 
            $currentRateList = $groupedRate[$item['branch_id']] ?? [];
            $rateNum = count($currentRateList);
            ?>
            <?php if ($rateNum === 0): ?>
            <tr>
                <td class="branch-name"><?php echo $item['name']; ?></td>
                <td colspan="2">暂无对应费率数据</td>
            </tr>
            <?php else: ?>
                <?php foreach ($currentRateList as $index => $rate): ?>
                <tr>
                    <?php if ($index === 0): ?>
                    <td class="branch-name" rowspan="<?php echo $rateNum; ?>"><?php echo $item['name']; ?></td>
                    <?php endif; ?>
                    <td><?php echo $rate['kg']; ?></td>
                    <td><?php echo $rate['amount']; ?></td>
                </tr>
                <?php endforeach; ?>
            <?php endif; ?>
        <?php endforeach; ?>
    </tbody>
</table>

效果说明 #

• 每个分支的名称单元格会自动根据该分支下的费率条数合并行，不管一个分支下有多少条费率，分支名只显示一次
• 所有列自动对齐，不需要手动计算宽度、调偏移，新增/删除费率数据也不会破坏排版
• 如果确实不想用表格，也可以用CSS Grid给每一行设置固定的列宽比例实现类似效果，但实现和维护成本比表格高很多，非特殊场景不推荐。

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