asked on

How to scroll the body of a table, leaving the headings visible

I want my table to sit in the bottom 75% of my web page, and when there is too much data to see in that space, I want to scroll the table. Currently the table is populated on a separate page and dispalyed in an inline frame. Problem is, when the user scrolls, the headings disappear from view.
I thought i might be able to style the body of the table as follows:

.mytableclass tbody{
height:500px;
overflow:scroll;
}

But this appears to set the height of the tables rows, not the height of the body.
I am using IE6 in an intranet, so I only have to worry about that browser.

Any ideas?

SOLUTION

neester

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

mreuring

Allas neester's solution is the only option. I've tried this before and as usual with interresting css solutions like these, IE don't play along... Off course the downside of splitting the table is that you have to use a fixed table-layout for the width of the columns.
I disagree about the headaches though ;)

Martin

ASKER CERTIFIED SOLUTION

COBOLdinosaur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

ftaco96

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

COBOLdinosaur

IE only!

Cd&

ftaco96

Yes. IE only.

> I am using IE6 in an intranet, so I only have to worry about that browser.

COBOLdinosaur

True, but they started out trying to use th estandard compliant method, so I gave them cross-browser. For IE only, there is no way I would go to an htc when there is s a sommple scripted solution that handles variable width columns and re-sizing:

Cd&

<html>
<head>
<style>
table#headers, table#data {table-layout:fixed;background:#dda0dd;}
td, th {vertical-align:top;background:#ffffff;}
</style>
<script language="javascript">
function init() {
var eTable = document.getElementById("headers");
eTable.style.width=document.getElementById('data').offsetWidth+'px';
document.getElementById('th1').style.width=document.getElementById('td1').offsetWidth+'px';
document.getElementById('th2').style.width=document.getElementById('td2').offsetWidth+'px';
document.getElementById('th3').style.width=document.getElementById('td3').offsetWidth+'px';
document.getElementById('th4').style.width=document.getElementById('td4').offsetWidth+'px';
}
window.onload = init;
window.onresize=init;
</script>
<style>
table#headers, table#data {background:#dda0dd;}
td, th {vertical-align:top;background:#ffffff;}
</style>
</head>
<body>
<table cellpadding="4" cellspacing="1" id="headers">
<tr>
<th id="th1">T</th>
<th id="th2">H</th>
<th id="th3">Y</th>
<th id="th4">H</th>
</tr>
</table>
<div style="width:100%;height:300px;overflow:auto;">
<table cellpadding="4" cellspacing="1" width="100%" id="data">
<tr>
<td id="td1">Data</td>
<td id="td2">Hello</td>
<td id="td3" style="width:60%">I am here and so are you</td>
<td id="td4">Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I...........................................xxxxxxxxxxxxxxxxxxxxxx</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
</table>
</div>
</body>
</html>

neester

Hey CobolDinosaur - isnt that exactly what I suggested????
Using two tables?
What is the javascript for - He has no problem with table widths?????
The problem is that he wants to scroll without losing the titles

COBOLdinosaur

With seperate tables the widths may not stay in synch with chages in content or screen size.

Cd&

arantius

If you use two different tables for headers and content, the headers don't line up with the content. His script fixes that.

neester

Awww ok - I just assumed 100% width with equal spaced table widths :)
Good point tho - sorry im not thinkin on all levels today :D

cjmackenzie

ASKER

Fantastic! I really like the answers I got here.
I thought I needed to split the table, or use divs instead, but while I had fixed the width of my table, I hadn't fixed the width of all my columns. So neester's answer was what I thought I'd have to do. CobolDinosaurs code builds on that and means I don't have to fix widths of columns and who knows - maybe at some point in the future I'll need cross browser so it's great to have that at my fingertips.
Thanks also to ftaco96. I don't know what an htc is, although I've a better idea now. Now if I want I can add an htc to my project, then any existing tables where I want to scroll the body, just add one line to the css and a couple of tags to the table.
I'm going to increase the point for this so I can share them around.
Many thanks to all of you.

Colin

COBOLdinosaur

Glad we could help. Thanks for the A. :^)

Cd&