Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 235
  • Last Modified:

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

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
madhusn
Asked:
madhusn
  • 4
  • 4
  • 4
  • +3
1 Solution
 
thunderchickenCommented:
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
 
TTomCommented:
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
 
limcuandoCommented:
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
Technology Partners: 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!

 
odenneCommented:
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
 
davlun20080Commented:
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
 
madhusnAuthor Commented:
Can you please mail me the code that you've mentioned in your comment?
0
 
limcuandoCommented:
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
 
madhusnAuthor Commented:
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
 
TTomCommented:
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
 
madhusnAuthor Commented:
Tom,

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

Thanks
0
 
TTomCommented:
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
 
davlun20080Commented:
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
 
TTomCommented:
This is a <div> which contains a table.  Overflow works (sort of) in IE.  Doesn't seem to do real well in NS.
0
 
limcuandoCommented:
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
 
madhusnAuthor Commented:
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
 
limcuandoCommented:
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
 
davlun20080Commented:
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 does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 4
  • 4
  • 4
  • +3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now