How can I make the below code display with a locked header so that when the user is scrolling down the display the header of the table is still visible? I have tried displaying a table with just the header and then a scrollable table below it, but then the columns do not match up because the column widths of the scrollable table change. I'm sure this is something very simple that I'm missing.
Code:
echo '<div style= height:500px;overflow:auto>';
echo '<table>';
echo '<table border="1" width="100%" cellpadding="10">';
echo '<thead><tr><th>' . implode('</th><th>', $rows[0]) . '</th></tr></thead>';
foreach($rows as $key=>$row):
echo '<tbody>';
echo '<tr>';
foreach($rows[0] as $field):
echo "<td bgcolor='white' align='center'>";
echo isset($row[$field]) ? $row[$field] : ' ';
echo '</td>';
endforeach;
echo '</tr>';
endforeach;
echo '</tbody></table>';
echo'</div>';