Solved

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

Posted on 2000-04-10
17
189 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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Deprecated and Headed for the Dustbin By now, you have probably heard that some PHP features, while convenient, can also cause PHP security problems.  This article discusses one of those, called register_globals.  It is a thing you do not want.  …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

747 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