PHP / HTML / CSS Table scroll

Question

I'm trying to implement my table with a scroll bar that will only how about 10 teams until it forces you to scroll down. However, I can't seem to get the coding right.

I'm planning on implementing the scrollable table across several different pages, in which the column headers will change in width. All the examples I have found required a fixed width for each column, is there a better way to do this?

** I want to keep fixed headers **

Here is my PHP code:

    echo '<table align="center" cellspacing="3" cellpadding="3" width="80%" border="1">
    <tr>
        <th align="center">Team Name</th>
        <th align="center">Wins</th>
        <th align="center">Losses</th>
        <th align="center">Winning %</th>
    </tr><div id="scrll_tbl">';

    $bg = '#eeeeee';

    for($i = 0; $i < count($teams); $i++) {
        $bg = ($bg == '#eeeeee' ? '#fffffff' : '#eeeeee'); 

        $wnpctg = $teams[$i][1] / ($teams[$i][1] + $teams[$i][2]);          

        echo '<tr bgcolor="' .$bg. '">
            <td align="center">' . $teams[$i][0] . '</td>
            <td align="center">' . $teams[$i][1] . '</td>
            <td align="center">' . $teams[$i][2] . '</td>
            <td align="center">' . number_format($wnpctg,3) . '</td>
        </tr>';
    }

echo '</div></table>';

and here is my CSS:

#scrll_tbl {
   overflow: scroll;
   height: 100px;
}

Answer 1

You can't actually have a div tag inside a table (it will be rendered outside the table as an empty div). The only way to have a fixed header is to have two tables and the second table inside a scrollable div. If you want a flexible width for table cells, you can use JavaScript to check the width of the first row table cells of your data and set the header cell width accordingly.