请求协助：为PHP数据表格添加计数器实现横向多列排列

嘿，我看你已经想到用计数器来实现每33条换列的思路了，这个方向完全没问题！只是原代码里没把计数器和布局结合起来，导致数据还是一直往下排。我帮你修改了代码，既能实现计数器的逻辑，又能让数据自动往右侧延伸，一起来看看：

修改后的完整代码 #

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<link rel="stylesheet" type="text/css" href="etc/sumain.css" />
<style>
/* 核心：用CSS多列容器实现横向排列 */
.tbresult-container {
  columns: auto 3; /* 最多3列，也可以写固定列数比如3，auto是自动适配宽度 */
  column-gap: 25px; /* 列之间的间距 */
}
.tbresult {
  width: 100%;
  break-inside: avoid; /* 防止表格被拆到不同列里，保证33条是完整的一块 */
  margin-bottom: 15px;
  border-collapse: collapse; /* 可选：让表格边框合并，更美观 */
}
.tbresult td {
  border: 1px solid #ddd; /* 可选：给单元格加边框 */
  padding: 8px;
}
</style>
</head> 
<body>
<?php 
include ("confige.php"); 
$query = 'select * from employees'; 
$result = mysqli_query($link, $query); 
if (!$result) { 
    $message = 'ERROR:' . mysqli_error($link); 
    echo $message;
} else { 
    $i = 0; 
    echo '<form name="select" action="" method="GET">'; 
    echo '<select name="mySelect" id="mySelect" onchange="this.form.submit()">'; 
    while ($i < mysqli_field_count($link)) { 
        $meta = mysqli_fetch_field_direct($result, $i); 
        echo '<option>' . $meta->name . '</option>'; 
        $i++; 
    } 
    echo '</select>'; 
    echo '</form>'; 
}

if(isset($_GET['mySelect'])) { 
    $myselect = $_GET['mySelect']; 
    // 安全细节：过滤变量防止SQL注入
    $myselect = mysqli_real_escape_string($link, $myselect);
    $sql = "SELECT `$myselect` as mySelect FROM employees"; 
    $result = mysqli_query($link, $sql); 

    if ($result->num_rows > 0) { 
        $counter = 0;
        // 创建多列容器，所有表格都放在这里面
        echo '<div class="tbresult-container">';
        // 开启第一个表格
        echo '<table class="tbresult">';
        
        while($row = $result->fetch_assoc()) { 
            $counter++;
            // 安全细节：转义输出内容防止XSS攻击
            echo "<tr><td>" . htmlspecialchars($row["mySelect"]) . "</td></tr>";
            
            // 每累计33条，关闭当前表格并新开一个
            if($counter % 33 == 0) {
                echo "</table>";
                echo '<table class="tbresult">';
            }
        }
        // 关闭最后一个表格，避免标签不闭合
        echo "</table>";
        echo '</div>';
    } 
} 
mysqli_close($link); 
?> 
</body> 
</html>

关键改动点说明 #

1. CSS多列布局是核心：
   新增的.tbresult-container容器用columns属性让内容自动分栏，每个33条数据的小表格会依次往右侧排列，列满后自动换行。break-inside: avoid能防止表格被拆成两半分到不同列，保证每33条数据是完整的一块。

2. 完善计数器逻辑：
   初始化$counter = 0，每循环一次计数器加1，当计数器模33等于0时，关闭当前表格并重新开启一个新表格，这样每33条数据就会被包裹在独立的表格里，配合CSS实现横向排列。

3. 安全小细节补充：

   • 用mysqli_real_escape_string过滤$myselect变量，防止SQL注入；
   • 用htmlspecialchars转义输出内容，避免XSS攻击。

可选简化方案（无需拆分表格） #

如果你不想拆分表格，也可以用CSS Grid直接实现，PHP代码几乎不用改：

.tbresult {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* 自动适配列宽 */
  gap: 10px;
}
.tbresult tr {
  display: block; /* 把表格行变成独立块元素 */
  border: 1px solid #ddd;
  padding: 8px;
}

这种方式下，PHP正常输出所有<tr>即可，CSS会自动将它们排列成多列，不过会改变原生表格的结构，样式调整需要多花点功夫。

你可以根据自己的需求选择方案，第一种拆分表格的方式更稳妥，样式也更容易控制～

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