Fixed page and table header w/ scrolling table content?

P

PapaGeek

New Member
I’m working on a large project that displays a huge amount of data in one large table with a one line, 3 part, page header above it.

Here is an example of a smaller page, less than 100 lines, http://www.papageek.com/funds/web/index.html . I want the page header, table header, and the first 3 table rows, tan background, to be fixed. The normal page scroll bar to the right should only scroll the remaining table lines.

I’ve found a few examples that use DIV commands to define the locked portion of the page, but it is not proper HTML syntax to start a DIV outside a TABLE definition and end it inside the table. Breaking the example into two tables kills the body column alignment with the header.

Is there a CSS or JavaScript method for doing this?
 
Last edited:
P

PapaGeek

New Member
My first try with the code I found did not work properly, and since it was poor HTML syntax, i I did not continue that approach.
 
P

PapaGeek

New Member
Here are two examples of what I have tried so far:

http://www.papageek.com/funds/web/scroll.html This example locks the page header, which is a table in itself, in place. The coding wraps the page header in DIV commands, class=page-header, and classifies the second table as class=content. This example does work, but it does not include locking the first 4 rows of the table in place. Code fragments:
Code: 
. . .
.page-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: linen;
}
.content {    margin: 65px auto;  }
. . .
</style>
</head><body><div class = page-header>
<table width="100%"><tr> . . .
</tr></table></div>
<center><table border=1 bgcolor=white class=content>
. . .

My first attempt to lock the first 3 rows was to remove the class of the second table, move the initial /DIV to a position after the 4th table line followed by a DIV class=content. This was not proper DHTML, DIV, TABLE, /DIV, /TABLE, and the second table did not even display!

http://www.papageek.com/funds/web/scroll2.html My second attempt was to remove the class content from the second table, enclose the first 4 rows in a DIV class=table-header, and enclose the remaining table rows in a DIV class=table-content, but the entire table moved to the table-content CSS position.
Code: 
.page-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: linen;
}
.table-header {
  position: fixed;
  top: 65;
  left: 0;
  width: 100%;
  height: 150px;
  background-color: linen;
}
.table-content{
    margin: 265px auto;
}
. . .
</style>
</head><body><div class = page-header>
<table width="100%"><tr>
. . .
</tr></table></div>
<center><table border=1 bgcolor=white>
<div class=table-header><tr>
First 4 table rows
</tr></div>
<div class=table-content>
<tr>
Rest of the table
</tr></div>
</center></table></body></html>

Any suggestions on the proper code to lock the first 4 table lines at the top of the page would be appreciated .
 
chrishirst

chrishirst

Well-Known Member
Staff member
Bit of playing about gets this.

http://chrishirst.co.uk/examples/scroll-table-demo.html


Code

HTML: 
<html>
	<head>
		<meta http-equiv="content-type" content="text/html">
		<meta charset="UTF-8">
		<script type="text/javascript">

		</script>
		<style>
			thead, tbody {
				display: block;
				width: 100%;
				}
			tr.foot td {
				color: blue;
				width: 20%
				text-align: center;
				}
			td {
				color: purple;
				width: 20%;
				}
			thead th {
				width: 20%;
				color: red;
				text-align: left;
				}
			table {
				width: 50%;
				border: 1px solid black;
				}
			tbody {
				width: 100%;
				height: 100px;       /* Just for the demo          */
				overflow-y: auto;    /* Trigger vertical scroll    */
				overflow-x: hidden;  /* Hide the horizontal scroll */
				}
		</style>
	</head>
	<body>
	<table>
			<thead>
				<th>Head 1</th>
				<th>Head 2</th>
				<th>Head 3</th>
				<th>Head 4</th>
				<th>Head 5</th>
				<th>&nbsp;&nbsp;&nbsp;</th>
			</tr>
		<tbody>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
				<td>Content 3</td>
				<td>Content 4</td>
				<td>Content 5</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
				<td>Content 3</td>
				<td>Content 4</td>
				<td>Content 5</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
				<td>Content 3</td>
				<td>Content 4</td>
				<td>Content 5</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
				<td>Content 3</td>
				<td>Content 4</td>
				<td>Content 5</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
				<td>Content 3</td>
				<td>Content 4</td>
				<td>Content 5</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
				<td>Content 3</td>
				<td>Content 4</td>
				<td>Content 5</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
				<td>Content 3</td>
				<td>Content 4</td>
				<td>Content 5</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
				<td>Content 3</td>
				<td>Content 4</td>
				<td>Content 5</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
				<td>Content 3</td>
				<td>Content 4</td>
				<td>Content 5</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
				<td>Content 3</td>
				<td>Content 4</td>
				<td>Content 5</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
				<td>Content 3</td>
				<td>Content 4</td>
				<td>Content 5</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
				<td>Content 3</td>
				<td>Content 4</td>
				<td>Content 5</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
				<td>Content 3</td>
				<td>Content 4</td>
				<td>Content 5</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
				<td>Content 3</td>
				<td>Content 4</td>
				<td>Content 5</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
				<td>Content 3</td>
				<td>Content 4</td>
				<td>Content 5</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
				<td>Content 3</td>
				<td>Content 4</td>
				<td>Content 5</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
				<td>Content 3</td>
				<td>Content 4</td>
				<td>Content 5</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
				<td>Content 3</td>
				<td>Content 4</td>
				<td>Content 5</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
			</tr>
				<td>Content 1</td>
				<td>Content 2</td>
				<td>Content 3</td>
				<td>Content 4</td>
				<td>Content 5</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
				<td>Content 3</td>
				<td>Content 4</td>
				<td>Content 5</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
				<td>Content 3</td>
				<td>Content 4</td>
				<td>Content 5</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
				<td>Content 3</td>
				<td>Content 4</td>
				<td>Content 5</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
				<td>Content 3</td>
				<td>Content 4</td>
				<td>Content 5</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
				<td>Content 3</td>
				<td>Content 4</td>
				<td>Content 5</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
				<td>Content 3</td>
				<td>Content 4</td>
				<td>Content 5</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
				<td>Content 3</td>
				<td>Content 4</td>
				<td>Content 5</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
				<td>Content 3</td>
				<td>Content 4</td>
				<td>Content 5</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
				<td>Content 3</td>
				<td>Content 4</td>
				<td>Content 5</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
				<td>Content 3</td>
				<td>Content 4</td>
				<td>Content 5</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
				<td>Content 3</td>
				<td>Content 4</td>
				<td>Content 5</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
				<td>Content 3</td>
				<td>Content 4</td>
				<td>Content 5</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
			</tr>
		</tbody>
			<tr class="foot">
				<td>Footer 1</td>
				<td>Footer 2</td>
				<td>Footer 3</td>
				<td>Footer 4</td>
				<td>Footet 5</td>
				<td>&nbsp;&nbsp;&nbsp;</td>
			</tr>
</table>

</body>
</html>

You may want to tidy up the additional 'empty' column with some CSS properties, it's there in the demo as a 'tweak' just to make the 'head' and 'foot' align because of the additional apace the scroll bar takes up inside the tbody.
 
You must log in or register to reply here.
Top