php - 数据库查询结果垂直滚动 block

Question

我有一个从数据库查询返回大量行的页面，但我似乎无法在正确的位置获取 DIV 标记。当我将 DIV 标记放在 while 循环之外时，我得到了表格上方的 block ，当我将它放在循环中时，我得到了每一行的 block ，然后是表格。这是我的代码:

<table class='style1' align="center" bgcolor="#FFFFFF" width="900">
<thead>
    <tr>
    <p align="center">&nbsp;</p>
        <th align='left'>
        <b><u>Last Name</u></b>
        </th>
        <th align='left'>
        <b><u>First Name</u></b>
        </th>
        <th align='left'>
        <b><u>Zone</u></b>
        </th>
        <th align='left'>
        <b><u>Level</u></b>
        </th>
        <th align='left'>
        <b><u>Cell Phone</u></b>
        </th>
        <th align='left'>
        <b><u>Email Address</u></b>
        </th>
        <th align='left'>
        <b><u></u></b>
        </th>
    </tr>
</thead>
<tfoot>
    <tr>

    </tr>
</tfoot>
<tbody>
<div class='scrollit'>
    <?php
        // Check connection
        if (mysqli_connect_errno()) 
        {
            echo "Failed to connect to MySQL: " . mysqli_connect_error();
        }
        $query = "SELECT refereeID, lastname, firstname, zone, level, cellphone, email, box from tbl_officials WHERE sector='1' or sector='3' ORDER by lastname, firstname";
        $result = mysqli_query($con,$query);
        while($row = mysqli_fetch_array($result)) 
        {
            echo "<form action='refereeinfo.php' method='post'>";
            echo "<tr>";
            echo "<td>" . $row['lastname'] . "</td>";
            echo "<td>" . $row['firstname'] . "</td>";
            echo "<td>" . $row['zone'] . "</td>";
            echo "<td>" . $row['level'] . "</td>";
            echo "<td>" . $row['cellphone'] . "</td>";
            echo "<td>" . $row['email'] . "</td>";
            echo "<td><input type='hidden' name='refereeID' value='" . $row['refereeID'] . "'/>
            <input type='submit' value='View'/></form>";
            echo "</td>";
            echo "</tr>";

        }
        mysqli_close($con);
        ?>
    </div>
    </tbody>
    </td>
</tr>

还有 div 的 CSS:

.scrollit {overflow-y:scroll; height:300px; overflow-x: hidden;}

如有任何帮助，我们将不胜感激。

Answer 1

首先，您的 HTML 无效。您不能将 div 用作 table、tbody 或 tr 的直接子项。您也不应该使用 form 作为上述标签的直接子标签。由于您唯一的表单元素位于 td 中，因此您也可以简单地将 form 标记放在那里。

...
<tbody>
    <tr>
        <td>lastname</td>
        <td>firstname</td>
        <td>zone</td>
        <td>level</td>
        <td>cellphone</td>
        <td>email</td>
        <td>
            <form action='refereeinfo.php' method='post'>
                <input type='hidden' name='refereeID' value='refereeID'/>
                <input type='submit' value='View'/>
            </form>
        </td>
    </tr>
</tbody>
...

您的主要问题的解决方案就在这里:HTML table with 100% width, with vertical scroll inside tbody