本文介绍如何将 php 查询的数据库记录按两列布局渲染到 html 表格中，避免单列冗余排版，通过数组预处理与嵌套循环实现整齐的 2 列（如 1 2 / 3 4 / 5 6）响应式表格结构。
本文介绍如何将 php 查询的数据库记录按两列布局渲染到 html 表格中，避免单列冗余排版，通过数组预处理与嵌套循环实现整齐的 2 列（如 1 2 / 3 4 / 5 6）响应式表格结构。
在实际开发中，直接在 while 循环中逐行输出 <tr> 容易导致布局僵化——例如你当前代码中每条记录独占一整行，右侧 <td id="columna2"> 始终为空，无法实现真正的“双列并排”展示效果。正确做法是先将所有数据读入数组，再按行列索引重组 DOM 结构。
以下是推荐的实现方案：
✅ 步骤一：预加载数据到索引数组
避免多次调用 fetch() 或游标错位问题，统一使用 fetch_all(MYSQLI_ASSOC) 获取全部结果：
<?php // 假设 $q 是已执行的 PDOStatement 或 mysqli_result $rows = $q->fetch_all(MYSQLI_ASSOC); // 或 mysqli_fetch_all($q, MYSQLI_ASSOC) $total = count($rows); $cols = 2; $rows_per_table_row = $cols; ?>
✅ 步骤二：构建双列表格结构
使用双重循环：外层控制 <tr> 行数，内层填充 <td> 单元格，并安全检查数组越界：
立即学习“PHP免费学习笔记（深入）”；
<table id="table" style="width: 100%; text-align: center;" border="0">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<?php for ($r = 0; $r < ceil($total / $cols); $r++): ?>
<tr>
<?php for ($c = 0; $c < $cols; $c++): ?>
<td>
<?php
$idx = $r * $cols + $c;
if (isset($rows[$idx])) {
$item = $rows[$idx];
?>
<div class="col-lg-12">
<div class="food-grid-item grid-style-one">
<br><br>
<div class="food-thumb grid-item">
<img src="assets/images/foodmenu/<?php echo htmlspecialchars($item['imagen']); ?>" alt="<?php echo htmlspecialchars($item['product_name']); ?>">
</div>
<div class="food-info grid-item">
<h3 class="food-title grid-item"><?php echo htmlspecialchars($item['product_name']); ?></h3>
<p><?php echo htmlspecialchars($item['descripcion']); ?></p>
<div class="food-price grid-item"><span>$</span><?php echo number_format($item['price'], 2); ?></div>
<div class="food-cart-tools grid-item">
<a href="#" class="food-cart btn btn-default">Add to cart</a>
</div>
</div>
</div>
</div>
<?php } else { ?>
<!-- 空单元格占位（可选） -->
<?php } ?>
</td>
<?php endfor; ?>
</tr>
<?php endfor; ?>
</tbody>
</table>⚠️ 注意事项
- 安全性：务必对输出内容使用 htmlspecialchars() 防止 XSS；图片路径建议配合 basename() 或白名单校验。
- 健壮性：使用 isset($rows[$idx]) 判断，防止最后一行列数不足时触发 Notice。
- 性能：对于大数据集（如 >1000 条），建议分页或前端虚拟滚动，而非全量渲染。
- 语义化：<th> 应仅用于表头，内容单元格统一用 <td>；原代码中 <th></th><th></th> 无意义，已移除。
该方案逻辑清晰、兼容 PDO / MySQLi，且易于扩展为 3 列、响应式栅格（配合 CSS Grid 更佳）。掌握“数据先行、结构后置”的思维，能显著提升动态表格开发效率。
