Solved

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

Posted on 2000-04-10
17
199 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
  • 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
 

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Find out what you should include to make the best professional email signature for your organization.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

929 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now