Trouble Displaying query results

[benderulz]

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.

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

 

[spamjim]

Here's a plain CSS example using position:fixed for the head.

http://jsfiddle.net/john_rock/h6hfX/1/

 

[spamjim]

I just realized that this jsfiddle example does not lock the column width between the table head and table body. There is another example here:

http://www.imaputz.com/cssStuff/bigFourVersion.html

These examples show a scrollable table within the page. If you do not want a scroll bar on a table and just want the table heading to appear regardless of the overall page scroll, you will need some javascript.

 

[benderulz]

Thanks for the example spamjim. I have the scroll function working great but my header row still scrolls with the rest of the table. Can you give me some insight into what I did wrong here?

echo '<div id="tableContainer" class="tableContainer">';
echo '<table border="1" width="99.9%"  cellpadding="10">';
echo '<thead class="fixedHeader"><tr><th>' . implode('</th><th>', $rows[0]) . '</th></tr></thead>';

foreach($rows as $key=>$row):
  
		echo '<tbody class="scrollContent">';
		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>';	
?>

 

[spamjim]

The magic is in the CSS, which is not displayed in your example. So we cannot troubleshoot how you have defined "fixedHeader" as a class in your CSS.

Also check your PHP output with an online HTML validator. (

http://validator.w3.org/

) It looks like you are generating an excess of opening tbody tags.

When designing for PHP output, it is ideal to leave PHP out entirely until you have the HTML/CSS worked out on dummy/filler data. Once that is designed, insert your PHP functions. You are complicating your design process right now with the PHP. Try approaching this without PHP.