Question

我想构建一个页面，我需要显示数据库中的所有成员。但是当我打印它们时，无论成员多少，它都会显示在同一条线上。我想将每行的成员数量限制为5.我该怎么做？

提前谢谢！

<table id="members-table">
<tr>
<?php
    $queryContent = "SELECT * FROM users WHERE member='yes'";
    $result = mysqli_query($db_connection, $queryContent);
    while($row = mysqli_fetch_assoc($result)) {
        echo '<td>
            <div class="card">
            <img src="img/img_avatar2.png" alt="Avatar">
            <div class="container">
            <h4><b>' .$row['ShownName']. '</b></h4> 
            <p style="font-family:Roboto;">Architect & Engineer</p>
            </div>
        </td>';
    }
?>

Answer 1

除了第一个循环外，你必须在每5个循环上写一个<tr>标记。

添加$num=0。然后，在循环中，检查$num是否大于1（不是第一个循环），并且具有5的模%为零。

<table id="members-table"><tr>
<?php
$queryContent = "SELECT * FROM users WHERE member='yes'";
$result = mysqli_query($db_connection, $queryContent);
$num = 0;
while($row = mysqli_fetch_assoc($result)) {
    if ($num++ % 5 == 0 && $num > 1) echo '</tr><tr>'; // Change is here
    echo '<td>
    <div class="card">
    <img src="img/img_avatar2.png" alt="Avatar">
    <div class="container">
    <h4><b>' .$row['ShownName']. '</b></h4> 
    <p style="font-family:Roboto;">Architect & Engineer</p>
    </div>
</td>';
}
?></tr></table>

Answer 2

使用mod运算符（％）就可以了。这将起作用，不会产生额外的不必要的TR或/ TR（如果数据为空，则只有一个空行）：

[5, 2, 1, 3, 4]
[5, 2, 1, 3]
[2, 1, 3, 4]
[5, 2, 1]
[2, 1, 3]
[1, 3, 4]
[5, 2]
[2, 1]
[1, 3]
[3, 4]

Answer 3

首先，您应该考虑不使用table元素来对齐您的内容。这是一种过时的做法，不推荐。查看此StackOverflow question以获取有关此主题的一些很好的建议。简而言之，在我们使用flexbox和网格布局之前，使用表来布置页面内容来自Web的早期阶段。

要回答您的问题，您应该实施$loop_count变量，并echo "</tr><tr>"每次$loop_count > 0 AND $loop_count % 5 == 0。{/ p>

Answer 4

魔鬼就是这个细节。因为要构建一个表（每行必须具有相同数量的列），所以需要编写条件来构建完整的结构。

首先，一组条件将数据分成5个单元格的行
第二，循环后的条件，以确保最终表行包含正确的单元格数。

代码：（Demo）

<table>
    <tr>
        <td>
            <div class="card">
                <img src="img/img_avatar2.png" alt="Avatar">
                <div class="container">
                    <h4><b>A</b></h4>
                    <p style="font-family:Roboto;">Architect & Engineer</p>
                </div>
            </div>
        </td>
        <td>
            <div class="card">
                <img src="img/img_avatar2.png" alt="Avatar">
                <div class="container">
                    <h4><b>B</b></h4>
                    <p style="font-family:Roboto;">Architect & Engineer</p>
                </div>
            </div>
        </td>
        <td>
            <div class="card">
                <img src="img/img_avatar2.png" alt="Avatar">
                <div class="container">
                    <h4><b>C</b></h4>
                    <p style="font-family:Roboto;">Architect & Engineer</p>
                </div>
            </div>
        </td>
        <td>
            <div class="card">
                <img src="img/img_avatar2.png" alt="Avatar">
                <div class="container">
                    <h4><b>D</b></h4>
                    <p style="font-family:Roboto;">Architect & Engineer</p>
                </div>
            </div>
        </td>
        <td>
            <div class="card">
                <img src="img/img_avatar2.png" alt="Avatar">
                <div class="container">
                    <h4><b>E</b></h4>
                    <p style="font-family:Roboto;">Architect & Engineer</p>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="card">
                <img src="img/img_avatar2.png" alt="Avatar">
                <div class="container">
                    <h4><b>F</b></h4>
                    <p style="font-family:Roboto;">Architect & Engineer</p>
                </div>
            </div>
        </td>
        <td>
            <div class="card">
                <img src="img/img_avatar2.png" alt="Avatar">
                <div class="container">
                    <h4><b>G</b></h4>
                    <p style="font-family:Roboto;">Architect & Engineer</p>
                </div>
            </div>
        </td>
        <td colspan="3"></td>
    </tr>
</table>

输出：

t^3 / sqrt(1 - t^2)

限制每行表格的最大元素数

4 个答案: