用于数据库查询结果的垂直滚动块

时间:2014-11-06 00:26:35

标签: php html mysql css

我有一个从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;}

任何帮助都将不胜感激。

1 个答案:

答案 0 :(得分:0)

首先,您的HTML无效。您不能将div用作tabletbodytr的直接子女。您也不应该使用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