Scrollable HTML table with fixed headers

JavaScript
1

I have searched the web for hours looking for an example of how to code a scrollable HTML table that has fixed headers (basically I want to scroll through the table but the headers should always be froze at the top of the table). Has anyone seen an example like this that I could reference? I prefer it not to be based on a Prototype JavaScript framework but Dojo would be acceptable… I guess best case scenario would to have it not be based on any JavaScript framework.

Thanks in advance for your time.

2

Try google-

Results about 381,000 for scrollable HTML table fixed header javascript.
(0.14 seconds)

3

http://candyscript.com/projects/minikit/samples/scrolltable.html

4

This is awesome… thank you very much!!!

For what its worth, I spent most of the day on Google yesterday and was not able to find a workable solution that was not heavily intertwined into a JavaScript framework. I have used Dojo a little but I did not want to use a 2nd framework since I thought it might get confusing having multiple JavaScript frameworks for one web app. Was I wrong to have this opinion?

5

Is this thing also possible when the scrollbar is larger (height) so it sticks next to the header / footer while the content area just scrolls?

Like in this example:

6

I think you can make that happen with html and css


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Table Test</title>
<style>
table {
	width: 500px;
	height: 500px;
}

tbody {
overflow: scroll;
}


</style>
</head>
<body>

<table border="1">
	<thead>
		<tr>
			<th>Heading</th>
			<th>Another Heading</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>row 1, cell 1</td>
			<td>row 1, cell 2</td>
		</tr>
		<tr>
				<td>row 2, cell 1</td>
				<td>row 2, cell 2</td>
		</tr>

	</tbody>
</table>

</body>
</html>

Something like that…

7

Thanks for the effort hannson. It doesn’t work unfortunatelly because the scrollbar will not be next to the header.