Vertical scroll block for database query results

Question

I have a page that returns a large number of rows from a db query and I am can't seem to get the DIV tag in the right location. When I put the DIV tag outside the while loop, I get the block above the table and when I place it in the loop, I get a block for every row and then the table. Here is my code:

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

And the CSS for the div:

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

Any help would be appreciated.

I don't believe a div inside a tbody is valid, perhaps adding the class to the tbody instead and removing the div would do it — xd6_, Nov 06 '14 at 00:41
Tables follow a strict structure. The only element allowed directly inside of a tbody is a tr. And the only element allowed directly inside of a tr is a td. Anything else and it will show outside the table. So you can't have a tbody with a div in it. To fix, some browsers do allow setting scroll on the tbody itself but it isn't cross browser. I've solved it before by adding the entire table to a div and using javascript to copy any thead to another table element that I set to a fixed position within the div over the top of the existing table. — Jonathan Kuhn, Nov 06 '14 at 00:42

score 0 · Answer 1 · edited May 23 '17 at 12:20

First of all, your HTML is invalid. You can't use div as a direct child of table, tbody or tr. You also shouldn't use form as a direct child of the tags stated above. Since your only form elements are inside a td, you can simply place the form tag there, too.

...
<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>
...

A solution to your main problem is right over here: HTML table with 100% width, with vertical scroll inside tbody

Thanks for the assistance, I was able to get it working. Cheers — posselax, Nov 06 '14 at 01:52

Vertical scroll block for database query results

1 Answers1