Solved

How to scroll only the HTML table data keeping header in position?

Posted on 2000-04-10
17
224 Views
Last Modified: 2008-01-16
If i have a HTML table with header and large data, when the user scrolls down the data, the header is out of screen and it is confusing to identify which data corresponds to which header.  How can I fix the header and provide scrolling for only the data so that when the user scrolls down, the header information is still available on the screen.
0
Comment
Question by:madhusn
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
  • 4
  • +3
17 Comments
 
LVL 11

Expert Comment

by:thunderchicken
ID: 2701980
i always have used percentages instead of pixel width, that way it's fixed on the browser, from what I read from your question, your data goes across the screen, correct?  just use in your table tab something like...
<td width="100%" height="20">

if that doesn't work, have you thought about using frames?  you can set frames without the scrolling bars on the top, check out this site

http://www.millhomes.com

I have frames set up at the top and side.  Lemme know if you have any questions
0
 
LVL 9

Expert Comment

by:TTom
ID: 2701993
There are two ways to accomplish this.  One is using frames.  The other involves a technique similar to a "watermark".  Check out www.brainjar.com for the navbar (which scrolls down the page always staying at the top of the page) or www.webreference.com/dhtml (look for the article which deals with watermarks).

I think that's as good as you are going to get.

Tom
0
 

Accepted Solution

by:
limcuando earned 50 total points
ID: 2702158
madhusn,

I have a small html file that shows how to do this but it would be too long to post in here because of all the data in it to show the scroll feature.

Basically, it uses a nested table and the tag:
<div style="height: 200px; overflow: scroll; ">

I can't remember where I got it from but if you want, I can send it you by email.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Expert Comment

by:odenne
ID: 2703238
Put the header for each column at the top in a separate frame to the table and then the table in a frame below it. The top frame will not scroll when the bottom one with the data in in does.
Good luck!
0
 
LVL 3

Expert Comment

by:davlun20080
ID: 2706769
I think you may be happiest avoiding frames and would suggest a combination of the comment from limcuando with one extension.  Place the header for your table in it's own positioned div, directly above the div for your table.  This way the data will scroll in your within your div and the titles will stay fixed in their div, and no frames to boot.

davlun
0
 

Author Comment

by:madhusn
ID: 2707793
Can you please mail me the code that you've mentioned in your comment?
0
 

Expert Comment

by:limcuando
ID: 2709177
madhusn,

Since you didn't give me your email address, here's a snippet of the code:

<html><head>
<title></title>
</head><body>
<table border><tr>
<td width='100px'>Header 1</td>
<td width='100px'>Header 2</td>
<td width='100px'>Header 3</td>
<td width='100px'>Header 4</td>
<td width='100px'>Header 5</td>
<td width='13'>&nbsp;</td>
</tr>
<tr><td colspan='6'>
<div style="height: 100px; overflow: scroll; "> 
<table>
<tr><td width='100px'>more...</td><td width='100px'>more...</td><td

width='100px'>more...</td><td width='100px'>more...</td><td

width='100px'>more...</td></tr>
<tr><td>more...</td><td>more...</td><td>more...</td><td>more...</td><td

>more...</td></tr>
<tr><td>more...</td><td>more...</td><td>more...</td><td>more...</td><td

>more...</td></tr>
<tr><td>more...</td><td>more...</td><td>more...</td><td>more...</td><td

>more...</td></tr>
<tr><td>more...</td><td>more...</td><td>more...</td><td>more...</td><td

>more...</td></tr>
</table>
</div>
</td></tr>
</table>
</body>
</html>


Hope this helps.
0
 

Author Comment

by:madhusn
ID: 2712189
limcuando,

I tried the code. But i couldn't get the scroll for the table data.  Your help is appreciated. my e-mail id is madhusn@hotmail.com
Thanks,
0
 
LVL 9

Expert Comment

by:TTom
ID: 2712277
I suspect that NS does not like the inline style for the <DIV>.  You might try:

<STYLE TYPE="TEXT/CSS">
#mydiv{
      position: absolute;
      visibility: show;
      overflow: scroll;
      left: 0px;
      top: 100px;
      height: 100px;
      width: 100px;
      clip: auto;
      z-index: auto;
}
</STYLE>

and

<div ID="mydiv">
(HTML code goes here)
</div>

where your style is defined as you need it.

Tom

0
 

Author Comment

by:madhusn
ID: 2713159
Tom,

I tried the code you've psoted, still it doesn't show the scroll bars.
Any suggestions?

Thanks
0
 
LVL 9

Expert Comment

by:TTom
ID: 2713252
Works like a charm in IE. Doesn't work at all in NS. (:-{

<html><head>
<title></title>
<STYLE TYPE="TEXT/CSS">
#mydiv{
position: absolute;
visibility: show;
overflow: scroll;
left: 25px;
top: 50px;
height: 100px;
width: 513px;
clip: auto;
z-index: auto;
}
</STYLE>

</head><body>
<table border><tr>
<td width='100px'>Header 1</td>
<td width='100px'>Header 2</td>
<td width='100px'>Header 3</td>
<td width='100px'>Header 4</td>
<td width='100px'>Header 5</td>
<td width='13'>&nbsp;</td>
</tr>
<tr><td colspan='6'>
<div ID="mydiv">
<table border>
<tr><td width='100px'>more...</td><td width='100px'>more...</td>
<td width='100px'>more...</td><td width='100px'>more...</td>
<td width='100px'>more...</td></tr>
<tr><td>more...</td><td>more...</td><td>more...</td>
<td>more...</td><td>more...</td></tr>
<tr><td>more...</td><td>more...</td>
<td>more...</td><td>more...</td>
<td>more...</td></tr>
<tr><td>more...</td><td>more...</td><td>more...</td>
<td>more...</td><td>more...</td></tr>
<tr><td>more...</td><td>more...</td><td>more...</td>
<td>more...</td><td>more...</td></tr>
<tr><td>more...</td><td>more...</td><td>more...</td>
<td>more...</td><td>more...</td></tr>
<tr><td>more...</td><td>more...</td><td>more...</td>
<td>more...</td><td>more...</td></tr>
<tr><td>more...</td><td>more...</td><td>more...</td>
<td>more...</td><td>more...</td></tr>
<tr><td>more...</td><td>more...</td><td>more...</td>
<td>more...</td><td>more...</td></tr>
<tr><td>more...</td><td>more...</td><td>more...</td>
<td>more...</td><td>more...</td></tr>
<tr><td>more...</td><td>more...</td><td>more...</td>
<td>more...</td><td>more...</td></tr>
<tr><td>more...</td><td>more...</td><td>more...</td>
<td>more...</td><td>more...</td></tr>
<tr><td>more...</td><td>more...</td><td>more...</td>
<td>more...</td><td>more...</td></tr>
<tr><td>more...</td><td>more...</td><td>more...</td>
<td>more...</td><td>more...</td></tr>
<tr><td>more...</td><td>more...</td><td>more...</td>
<td>more...</td><td>more...</td></tr>
<tr><td>more...</td><td>more...</td><td>more...</td>
<td>more...</td><td>more...</td></tr>
<tr><td>more...</td><td>more...</td><td>more...</td>
<td>more...</td><td>more...</td></tr>
<tr><td>more...</td><td>more...</td><td>more...</td>
<td>more...</td><td>more...</td></tr>
</table>
</div>
</td></tr>
</table>
</body>
</html>

Sorry,

Tom
0
 
LVL 3

Expert Comment

by:davlun20080
ID: 2713255
Unless I am mistaken and I could be totally wrong, but I don't think either browser will support the overflow or scroll feature on a text area.  that will need to be appliced to a div or layer?????
0
 
LVL 9

Expert Comment

by:TTom
ID: 2713291
This is a <div> which contains a table.  Overflow works (sort of) in IE.  Doesn't seem to do real well in NS.
0
 

Expert Comment

by:limcuando
ID: 2713636
In my previous comment, which obviously didn't get posted, I said that this code works in IE and I've checked it's functionality in NS using Browserola.  I didn't have any problem with either one.

TTom,
Thanks for the follow up.

madhusn,
I've emailed you the whole code.  Does it still not work for you?  What Browser/Version are you using?
0
 

Author Comment

by:madhusn
ID: 2714513
limcuando,

Its working in IE 4.0 but not in NS4.72.
What is Browserola and how to use it?

Thanks for your help.

Also thanks to TTom.
0
 

Expert Comment

by:limcuando
ID: 2716307
madhusn,

I don't have NS installed on my computer (I really don't want two browsers in my system).  I use Browserola which is a browser emulator.  For more info, goto http://wwww.codo.com

0
 
LVL 3

Expert Comment

by:davlun20080
ID: 2718514
First of all let me say that I am sorry you accepted an answer that will not work for you, perhaps CS may be able to help you out in that area.  On the other hand, limcuando did give you half the answer and I do not think you will get the half for ns.

Even using NS's own CSS style generator I was not able to get a div with a table in it scroll, at all.  I am using NS (the actual browser) and it will not work.  You asked earlier about Browserola, well an emulator is a program that is supposed to give you an accurate representation of multiple browsers in a single program.  However, unless the emulator handles EVERYTHING exactly as the actual broswer, it is only an approximation.  

The code above working in the emulator but not in the actual browser is a prime example.

davlun
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question