"Locking" table headers

liunx · Jan 9, 2008

Hi all! I've gone through several threads to find the info I need, without much luck. So, here's the question. 
 
I need to display tabular output data. The table in question has several columns. Each column has a title. The requirement is to provide a vertical scrollbar if the table becomes too long, keeping the column headers (titles) visible at all times. 
 
Ideally, I'd like to be able to specify a %age of the available height, so that if the table length exceeds that %age, the scrollbar appears. 
 
I've tried to implement this using two tables, one for the column headers (titles) and the second table to contain the data. The second table is enclosed in a <DIV> tag w/ "overflow:auto" specified. This approach almost worked. However, when the scrollbar appeared for the second table, the horizontal alignment of the column headers and the column data was messed up. 
 
BTW, in case it's germane, I'm currently using IE 5.5, since that's the corporate standard for the client. 
 
Any and all help in this regard will be highly appreciated.You can make the table width 100% of the div and then put the header outside of the div and this way it will be stationary but if its the same length and width it will look like its part of the table I guess. that would be the easyest way that I can think of.Hi PeOfEo! Thanks for your response. That's exactly what I tried. However, it seems that the scrollbar is contained within the width of the DIV. That, in turn, messes up the alignment of the columns. If there's a way to move that scrollbar OUTSIDE the width specified for the DIV, I think things would fall in place. Perhaps some guru here can come up with a solution. 
 
Have a great day! 
 
--geminiIt might help if you post your code so the rest of us can take a look at it.Hi spufi! I am not able to post the actual code, since client confidentiality comes into play. However, here's some code I created that effectively describes the issue. 
 
<html> 
<head> 
</head> 
 
<body> 
 
<table border="1" cellpadding="2" cellspacing="0" width="98%"> 
<tr> 
<td width="20%">Col A</td> 
<td width="30%">Col B</td> 
<td>Col C</td> 
</tr> 
</table> 
 
<DIV style="overflow:auto; height:400px; width:98%"> 
<table border="1" cellpadding="2" cellspacing="0" width="100%"> 
<tr> 
<td width="20%">11</td> 
<td width="30%">2222</td> 
<td>333333</td> 
</tr> 
<tr> 
<td>11</td> 
<td>2222</td> 
<td>333333</td> 
</tr> 
<tr> 
<td>11</td> 
<td>2222</td> 
<td>333333</td> 
</tr> 
<tr> 
<td>11</td> 
<td>2222</td> 
<td>333333</td> 
</tr> 
<tr> 
<td>11</td> 
<td>2222</td> 
<td>333333</td> 
</tr> 
<tr> 
<td>11</td> 
<td>2222</td> 
<td>333333</td> 
</tr> 
<tr> 
<td>11</td> 
<td>2222</td> 
<td>333333</td> 
</tr> 
<tr> 
<td>11</td> 
<td>2222</td> 
<td>333333</td> 
</tr> 
<tr> 
<td>11</td> 
<td>2222</td> 
<td>333333</td> 
</tr> 
<tr> 
<td>11</td> 
<td>2222</td> 
<td>333333</td> 
</tr> 
<tr> 
<td>11</td> 
<td>2222</td> 
<td>333333</td> 
</tr> 
<tr> 
<td>11</td> 
<td>2222</td> 
<td>333333</td> 
</tr> 
<tr> 
<td>11</td> 
<td>2222</td> 
<td>333333</td> 
</tr> 
<tr> 
<td>11</td> 
<td>2222</td> 
<td>333333</td> 
</tr> 
<tr> 
<td>11</td> 
<td>2222</td> 
<td>333333</td> 
</tr> 
<tr> 
<td>11</td> 
<td>2222</td> 
<td>333333</td> 
</tr> 
<tr> 
<td>11</td> 
<td>2222</td> 
<td>333333</td> 
</tr> 
</table> 
</div> 
 
</body> 
</html> 
 
TIA. 
 
Have a great day!I see that there isn't a final response here for gemini's question. I'm trying to do the same thing. Although my requirements are to take tabular data and display it while keeping top rows, left columns and bottom row stationary and allowing the other rows to scroll left to right. 
 
Thoughts?I-frame?Well, I could, but the data in this table is going to be displayed dynamically from the database. With an iframe I'd have to populate the table on different pages. Don't think that will work. 
 
Even the column headers will be displayed dynamically.Just make the div or the iframe widther then the table and use left alignment so they start in the same place yet the scroll bar is outside of the width of the headers or put The div or iframe inside of the table but put an extra column in that is the width of the scroll bar. Play around with the widths since not all scroll bars in all browsers will be quite the same widths. You could just disable the scroll bars and use a graphical scroll bar using dhtml or something but this is not usually a good alternative since not all browsers can handle that codeCheck out this page. 
 
<a class="postlink" href="http://chin.ithsnyc.org/computers/TableHeaderAlwaysVisible.html">http://chin.ithsnyc.org/computers/Table ... sible.html</a>Perhaps you can do something with the overflow attribute on the <tbody> tag like this: 
 
tbody {width:100%; height:200px;overflow:scroll} 
 
I haven't tested it but in theory that should make the body of the table scrollable while leaving the <thead> and <tfoot> in place. 
 
The general layout for a table is as follows (since the thead, tfoot, and tbody tags have been left out of the prior discussion): 
 
<table><thead> 
table rows for header go here 
</thead><tfoot> 
table rows for footer go here 
</tfoot><tbody> 
table rowsd for body content go here 
</tbody></table>

"Locking" table headers

liunx

Guest