Scrolling table, static headers

JamesLean · Feb 15, 2005

I have a large table of data which is often much higher than the available screen height. What I am trying to achieve is to put the table in a fixed-height div and when the user scrolls down, all the data rows scroll but the single top row of headings stays where it is, ie always visible at the top.

Obviously I can put the table in a div and specify CSS like:

Code:

div {
  width: 100%;
  height: 400px;
  overflow: auto;
}

This allows the user to scroll through the table independently of the page, which is fine. But obviously the headings disappear as soon as they do that.

I tried putting the div just around the data rows, ie:

Code:

<table>
  <tr>
    <td>Head 1</td>
    <td>Head 2</td>
    <td>Head 3</td>
  </tr>
  <div>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
  ...
  </div>
</table>

but it didn't seem to work.

I also tried specifying <thead>, <tfoot> and <tbody> sections and applying the CSS to the <tbody> section but this didn't work either.

Does anyone know if what I'm trying to achieve is even possible, and if so how to do it?

--James

Vragabond · Feb 15, 2005

It's sort of a cheating but try to look at this example:

http://www.ssi-developer.net/css/non-scrolling-table-hdr.shtml

JamesLean · Feb 15, 2005

Thanks. I did actually see that but, as you say, it's a cheat and didn't quite work - the problem was that my columns were variable width so would never line up properly.

Typically, as soon as I posted the question here I found my solution!

http://web.tampabay.rr.com/bmerkey/examples/nonscroll-table-header.html

It also links to a couple more examples and I used the general ideas to create my table. This was easier as this is for an internal intranet which is IE-only but some of the solutions should work OK cross-browser.

--James

Maim · May 3, 2005

To my knowledge, the only browser capable of doing something like this with a single table is mozilla based (Mozilla, Firefox, etc...)

You'd create your table as you like except you'd include <thead> and <tbody> elements and the tbody would have the class that defines its height and scroll attributes.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Sample body scroll</title>
<style type="text/css">
.Scroll{
  height:100px;
  overflow:auto;
}
</style>
</head>

<body>

<table border="1">
<thead>
<tr>
<td width="50">title 1</td>
<td width="40">title 2</td>
<td width="100">title 3</td>
<td width="15"><!-- empty tag so the bottom scroll doesn't appear--></td>
</tr>
</thead>
<tbody class="Scroll">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</tbody>
</table>

</body>
</html>

Unfortunately, the above example in IE sets the height of each row in the body to 100 haha.

For IE, you kind of have no choice but to use a div within a table that has your headers to accomplish the same thing.

-----------------------------------
"Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning." - Rich Cook

BillyRayPreachersSon · May 3, 2005

While by no means perfect, the following code shows how you can achieve this with two tables and a small amount of JavaScript:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta http-equiv="content-language" content="en" />
	<title>Scrollable table demo</title>

	<script type="text/javascript">
	<!--

		function alignTables(headerTable, bodyTable) {
			var headerRow0 = document.getElementById(headerTable).rows[0].cells;
			var bodyRow0 = document.getElementById(bodyTable).rows[0].cells;
			if (headerRow0.length != bodyRow0.length) return;

			for (var loop=0; loop<headerRow0.length; loop++) {
				var columnWidth = Math.max(headerRow0[loop].offsetWidth, bodyRow0[loop].offsetWidth);
				headerRow0[loop].style.width = columnWidth + 'px';
				bodyRow0[loop].style.width = columnWidth + 'px';
			}
		}

	//-->
	</script>

	<style type="text/css">
		#table1BodyContainer {
			width: 500px;
			height: 100px;
			overflow: scroll;
		}
	</style>
</head>

<body onload="alignTables('table1Header', 'table1Body');">
	<table border="1" id="table1Header">
		<tr>
			<th>Head 1</th>
			<th>Head 2</th>
			<th>Head 3 (which is very long)</th>
		</tr>
	</table>

	<div id="table1BodyContainer">
		<table border="1" id="table1Body">
			<tr>
				<td>Data 1</td>
				<td>Data 2 (which is very long)</td>
				<td>Data 3</td>
			</tr>
			<tr>
				<td>Data 4</td>
				<td>Data 5</td>
				<td>Data 6</td>
			</tr>
			<tr>
				<td>Data 7</td>
				<td>Data 8</td>
				<td>Data 9</td>
			</tr>
			<tr>
				<td>Data 10</td>
				<td>Data 11</td>
				<td>Data 12</td>
			</tr>
			<tr>
				<td>Data 13</td>
				<td>Data 14</td>
				<td>Data 15</td>
			</tr>
		</table>
	</div>
</body>
</html>

Hopefully this will give you some ideas of what can be done, anyway.

It works in IE6, NN7, Opera7, FF1, and should work just fine in Safari.

Hope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

vongrunt · May 4, 2005

AFAIK this is possible with CSS (bugzilla) and dynamic expressions (M$IE)... I think that's exactly what Brett Merkey did in his tutorial.

------
heisenbug: A bug that disappears or alters its behavior when one attempts to probe or isolate it
schroedinbug: A bug that doesn't appear until someone reads source code and realizes it never should have worked, at which point the program promptly stops working for everybody until fixed.
[ba

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Scrolling table, static headers

JamesLean

Programmer

Vragabond

Programmer

JamesLean

Programmer

Maim

Programmer

BillyRayPreachersSon

Programmer

vongrunt

Programmer

Similar threads

Part and Inventory Search

Sponsor