PDA

View Full Version : Table...How do you freeze the top 2 rows while scrolling

acrokos
08-15-2002, 02:26 AM
Table...How do you freeze the top 2 rows while scrolling down a large table? can it be done?

sample html table enclosed....

<html>
<head>
<title>TABLE TITLE</title>
</head>
<body>

<table border=1 cellspacing=0 bordercolor=#FFFFFF>
<tr>
<td align="center" colspan="5" bgcolor="#000000"><b><font color="#FFFFFF">TABLE TITLE</font></b></td>
</tr>
<tr align="center" bgcolor="#000000">
<td><b><font color="#FFFFFF">&nbsp;FIELD TITLE.1&nbsp;</font></b></td>
<td><b><font color="#FFFFFF">&nbsp;FIELD TITLE.2&nbsp;</font></b></td>
<td><b><font color="#FFFFFF">&nbsp;FIELD TITLE.3&nbsp;</font></b></td>
<td><b><font color="#FFFFFF">&nbsp;FIELD TITLE.4&nbsp;</font></b></td>
<td><b><font color="#FFFFFF">&nbsp;FIELD TITLE.5&nbsp;</font></b></td>
</tr>
<tr bgcolor="#C0C0C0" align="center">
<td >A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
<td>E1</td>
</tr>
<tr align="center">
<td>A2</td>
<td>B2</td>
<td>C2</td>
<td>D2</td>
<td>E2</td>
</tr>
<tr bgcolor="#C0C0C0" align="center">
<td>A3</td>
<td>B3</td>
<td>C3</td>
<td>D3</td>
<td>E3</td>
</tr>
<tr align="center">
<td>A4</td>
<td>B4</td>
<td>C4</td>
<td>D4</td>
<td>E4</td>
</tr>
<tr bgcolor="#C0C0C0" align="center">
<td>A5</td>
<td>B5</td>
<td>C5</td>
<td>D5</td>
<td>E5</td>
</tr>
<tr>
<td align="center" colspan="5" bgcolor="#000000"><b><font color="#FFFFFF">TABLE SOURCE</font></b></td>
</tr>
</table>

</body>
</html>
Spookster
08-15-2002, 03:14 AM
I wrote this a long time ago. It's just simply uses an absolutely positioned div containing a table with the headers that stays static above the other table. It needs to be updated for current browsers though. Too busy to do it right now.



<html>
<head>
<title>Static Table Headers</title>
</head>
<body>

<div id="staticHeaders" style="position:absolute">
<table width="500" bgcolor="red" border="1"><tr>
<td>Header 1</td>
<td>Header 2</td>
<td>Header 3</td>
</tr></table>
</div>

<script>
function positionit(){
//if the user is using IE 4+
if (document.all){
staticHeaders.style.left=10
staticHeaders.style.top=document.body.scrollTop;
}
//else if the user is using NS 4
else if (document.layers){
document.staticHeaders.left=8
document.staticHeaders.top=pageYOffset
}
}
setInterval("positionit()",200)
</script>
<br>
<table width="500" bgcolor="blue" border="1">
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
</tr>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
</tr>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
</tr>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
</tr>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
</tr>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
</tr>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
</tr>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
</tr>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
</tr>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
</tr>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
</tr>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
</tr>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
</tr>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
</tr>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
</tr>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
</tr>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
</tr>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
</tr>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
</tr>
</table>
</body>
</html>
acrokos
08-15-2002, 06:09 AM
Thanks...just tried it out but the problem w/ my table is the header table column (table#1) width is out of wack with my data table (table#2). Is there any way we can just have one table and use the <div> tag on just the top 2 rows?