如何将PHP从MySQL提取数据生成的HTML表格分栏并排显示

嘿，别发愁啦！作为过来人，我给你两个超容易上手的方案，帮你把纵向的数据改成分栏并排展示，新手也能直接套用～

这个方法最简单，完全不用动你的MySQL查询和后端代码，只需要加几行CSS就能让浏览器自动帮你分栏。

思路：利用CSS的多列布局属性，把存放数据的容器分成指定数量的列，数据会自动从上到下、从左到右填充，超出的话自动换行到下一行的列。

举个具体的例子（假设你用PHP输出数据）：

<!-- 先写CSS样式 -->
<style>
    /* 数据容器 */
    .data-container {
        column-count: 3; /* 分成3列，你可以改成2列或者其他数字 */
        column-gap: 25px; /* 列之间的间距 */
        padding: 20px;
    }
    /* 每条数据的样式 */
    .data-item {
        break-inside: avoid; /* 防止单条数据被拆分到两列里 */
        margin-bottom: 10px;
        padding: 8px;
        background-color: #f5f5f5;
        border-radius: 4px;
        border: 1px solid #ddd;
    }
</style>

<!-- 后端输出数据的部分 -->
<div class="data-container">
    <?php
    // 这里是你的MySQL查询和循环逻辑，不用改！
    $conn = mysqli_connect('localhost', '你的用户名', '你的密码', '你的数据库名');
    $result = mysqli_query($conn, "SELECT * FROM 你的表名");
    while ($row = mysqli_fetch_assoc($result)) {
        echo "<div class='data-item'>";
        // 这里换成你要展示的字段，比如ID、名称等
        echo "ID: {$row['id']} | 内容: {$row['content']}";
        echo "</div>";
    }
    ?>
</div>

这个方案的好处是零后端改动，适合快速见效；缺点是没办法严格控制每栏刚好30行——如果总数据不是30的倍数，最后一列的行数会少一些，但视觉上依然很整齐。

如果你必须让每栏刚好显示30条数据，那就要稍微改一下后端代码，把数据分成每30条一组，再用前端的flex布局把这些组并排展示。

思路：先把从MySQL拿到的所有数据存到一个数组里，用数组拆分工具把它切成每30条一组的小数组，然后前端循环每个小数组，把每组放到一个列容器里，用flex让这些列并排，空间不够时自动换行。

还是用PHP举例子：

<?php
// 1. 连接数据库并查询数据
$conn = mysqli_connect('localhost', '你的用户名', '你的密码', '你的数据库名');
$result = mysqli_query($conn, "SELECT * FROM 你的表名");

// 2. 把所有数据放到数组里
$all_data = [];
while ($row = mysqli_fetch_assoc($result)) {
    $all_data[] = $row;
}

// 3. 把数组分成每30条一组
$column_data = array_chunk($all_data, 30);
?>

<!-- 前端部分 -->
<style>
    .data-wrapper {
        display: flex;
        flex-wrap: wrap; /* 空间不够时自动换行 */
        gap: 25px; /* 列之间的间距 */
        padding: 20px;
    }
    .data-column {
        flex: 1; /* 让每列平分可用空间 */
        min-width: 280px; /* 防止列太窄，影响可读性 */
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 10px;
    }
    .data-item {
        margin-bottom: 8px;
        padding: 6px;
        background-color: #f5f5f5;
        border-radius: 2px;
    }
</style>

<div class="data-wrapper">
    <?php
    // 循环每一组数据，生成一列
    foreach ($column_data as $column) {
        echo "<div class='data-column'>";
        // 循环当前组里的每条数据
        foreach ($column as $item) {
            echo "<div class='data-item'>";
            echo "ID: {$item['id']} | 内容: {$item['content']}";
            echo "</div>";
        }
        echo "</div>";
    }
    ?>
</div>

这个方案能严格保证每栏最多30条数据，数据多的话会自动在3列之后换行，继续展示下一组的3列，完全符合你的需求。

不管你选哪种方案，只需要把代码里的数据库信息、表名、展示字段换成你自己的就行啦！要是还有细节搞不定，随时问～

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