数据库查询结果的垂直滚动块答案

【问题标题】：Vertical scroll block for database query results数据库查询结果的垂直滚动块
【发布时间】：2014-11-06 08:55:51
【问题描述】：

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

<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;}

任何帮助将不胜感激。

【问题讨论】：

我不相信 tbody 中的 div 是有效的，也许将类添加到 tbody 并删除 div 就可以了
表格遵循严格的结构。唯一允许直接在 tbody 内部的元素是 tr。并且唯一允许直接在 tr 内部的元素是 td。其他任何内容都会显示在表格之外。所以你不能有一个 tbody 里面有一个 div 。要解决此问题，某些浏览器确实允许在 tbody 本身上设置滚动，但它不是跨浏览器。我之前通过将整个表格添加到 div 并使用 javascript 将任何 thead 复制到另一个表格元素来解决它，我将其设置为 div 内现有表格顶部的固定位置。

标签： php html mysql css

【解决方案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

【讨论】：

感谢您的帮助，我能够让它工作。干杯