A Scrollable Table With a Fixed Header

Try setting the header title of the first header to 'A longer title'and your method breaks down...

What about on IE 5.2??
When I do this kind of table with a scrollbar, the browser has a scrollbar to the actuall lenght of the content regardless of what the overflow value is.
Look at http://www.julianarp.com/2/discography.html for an example.

The scrollbar appears to work fine on most everything except IE 5.2 as far as I can tell.
But, after much searching I found that the solution appears to be...

In the exterior css -

Body {
overflow: hidden;

}

Who knew! Is that a hack? What's a hack?

Your example only works because all header strings have the same length and all row strings have the same length.

Very simple but effective CSS snippit. I use it for my new project at the moment to display all the pages. And that list is getting longer and longer, I didn't know a proper solution. I don't want that the page scrolls so I thought I might have to use the iframe. But luckly after I found this article I haven't use the iframe. A perfect solution!

I have more complex problem than this.

My column values vary in sizes dynamically so the header and columns are always mis aligned. To avoid this I included my text within the header and ser the header style to be fixed. as

                                             [HeaderStyle CssClass="ms-formlabel DataGridFixedHeader"][/HeaderStyle]

and my css:

.DataGridFixedHeader
{
FONT-WEIGHT: bold;
COLOR: white;
POSITION: relative;  
TOP: expression(this.parentNode.parentNode.
                   parentNode.scrollTop-1);
background-color:#003366;
    border-color:#999999; }

This works fine with a fixed header and scrollable table.

the problem is My gridview control is placed within a Div. Also as you know the grid view control is rendered as div. There is some kind of mis alignment happening whent he page size is changed. I hope is you have worked on complex solutions you might have come across similar problems.

Is there a way to prevent the Div tags from misaligning?

Any help will be appriciated.

thanks,
Valar

A great control, but if the list was extensive how do you maintain the scroll position after postback?

This is a nice simple solution.  My concern is that it violates one of the basic concepts of the web: don't convey structure
with presentation.  The table containing the column headings is a separate entity, the only reason it conveys the
relationship that it contains headers for the following table is because it happens to be positioned over the other table.  
That sounds like a knit-picky theoretical idealistic rant until one of those theoretically possible alternative  nonvisual
display browsers, such as, for example, speech, encounters your web page.  When that happens all this idealistic stuff
becomes very practical, especially if it affects your job!  I am a blind computer user.  My screen reading software (JAWS)
needs to know that relationship to provide the meaning expressed by the visual position of the headers, but it cannot
determine that the cells in the other table are the headings for the scrolling table, its best guess is the values in the
first row of the scrolling table.  The reason I found this page is because I was looking for a solution for a client for whom
I did accessibility testing of a page with such an implementation.  Unfortunately, using the HEADERS attribute on the data
table cells and pointing it to the appropriate cell in the other table doesn't work either, which could be argued is a
problem with the screen reader.  For the scrolling body with fixed headers effect to also provide accessible column headers
the headers must be in the same table.  There is such an implementation at http://www.imaputz.com/cssStuff/bigFourVersion.html, at least it works right in JAWS.  There is other stuff going on in this
example-- I would be interested in the minimum of what is done there to achieve the scrolling table body with fixed headers
effect.

BTW:  I'm going to have to have some one read me the characters in the picture.  When they procecute spammers could they also
procecute them for obstructing accessibility :-)?

Thanks.

I am calling a 2nd jsp page from 1st jsp page. now in 2nd jsp, i have a table.I need the following functionality...
The header of the table shoud be fixed when I scroll vertically but flaxible when i use horizontal scrollbar....

I treied to use div tag.......... But now succeded

Above code  that you gave works fine , but in my case table data is coming from database which is dynamic.If the data size increases the header wont increase.
Please tell me how to avoid this problem?

I am also facing the same problem as told by sandeep sangole. I am also getting table data from database which is dynamic where no. of columns may exceed to about 30-40 columns while around 150 rows.
Please help how fix the header as it becomes very difficult after coming to 50th row and then again scrolling back to 1st row to see actually which column i am looking at.......!!!!!

Thanks Imar for your quick reply...

Actually we are reading excel sheet and displaying it in grid format and there we are expecting more no. of columns and row's. currently i am using div but i was not able to fix the header . If you have got any reference do tell it to me........

In the scrollable table i need to add maximum 10 rows.then how can i proceed

This was a gr8 one.. But I have one query.. It works Fine with ASP Technology right?

I am looking for something that would fix both left header and top header.  Any suggestions?

Hi Valar,

The below code:
.DataGridFixedHeader
{
FONT-WEIGHT: bold;
COLOR: white;
POSITION: relative;  
TOP: expression(this.parentNode.parentNode.
                   parentNode.scrollTop-1);
background-color:#003366;
    border-color:#999999; }

This works fine with a fixed header and scrollable table.

Its working fine in IE but not in mozilla.. In mozilla the header grid also scrolling :( can you please what i have to do changes for mozilla....

Hi,

I tried out this.It is working fine; but giving alignment problem. My table have around 14500 rows which are being fetched from database. Is it the right method to use for such a table or you would like to suggest something else.

Thanks

I created a small solution that resizes the header columns to the body columns and allows to expand the table to display all its rows if needed to print.

In the source that follows, all the tags opening and closing are replaced by [ and ]

[!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]
[html xmlns="http://www.w3.org/1999/xhtml"]
[head]
  [meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /]
  [title]Table with scroll[/title]
  [style type="text/css"]
    [!--
    body, table  {font-family: verdana, arial, sans-serif; font-size: 10px;}
    #tableheader {background-color: lavender; border-top: solid 1px #808080; border-right: solid 1px #808080;}
    #tablebody   {border-right: solid 1px #808080;}
    td           {color:blue; border-bottom: solid 1px #808080; border-left: solid 1px #808080;}
    --]
  [/style]

  [script]
    [!--
    // This routine, called by the small button expands or
    // shrink the div containing the "body" rows, by switching
    // the overflow property. The timeout to call the adjusting
    // routine is just to give time to the browser to interpret
    // all events.
    function expand_scroll() {
      var es = document.getElementById('divbody').style;
      if (es.overflow=='auto') es.overflow='';
      else es.overflow='auto';
      var t=setTimeout("adjust()",20);
    }
    
    // This routines first adjusts the body table width to its division
    // width. Then it retrieves the first row TableCells objects in both
    // tables and adjust the width of the "header" columns at the size
    // of the "body" columns, taking out the pixels for the borders as we
    // work with width and clientWidth.
    function adjust() {
      var offset;
      if(navigator.appName=='Microsoft Internet Explorer') offset=2;
      else offset=2;
      var d=document.getElementById('divbody').clientWidth;
      document.getElementById('tablebody').style.width= (parseInt(d)-2)+'px';
      var y=document.getElementById('tableheader').rows[0].cells;
      var x=document.getElementById('tablebody').rows[0].cells;
      for (i=0;i[document.getElementById('tableheader').rows[0].cells.length;i++) {
        y[i].width = (parseInt(x[i].clientWidth)-offset)+'px';
      }
    }
    --]
  [/script]
[/head]

[body onload="adjust();" onresize="adjust();"]

it's a good solution for static table only  the problem is to use the solution with dynamic table(ajax table) then we need to adjust the header dimension to the body dimension

Guys,

Check this out.. http://www.s7u.blogspot.com.. This has fixed header, fixed footer, fixed right and left column..

Thanks,
Shahib

Hi Guys, an easy to implement table scroller is explained here http://jaimonmathew.wordpress.com/2010/02/02/scroller/
It has support for ie6/7/8, firefox and chrome, and works on fixed and variable width tables.

Jaimon

Your scrolling table works great on my very long list of vinyl records. Its on my website at www.woodleynet.co.uk/index3.htm. See "My Vinyl Records" link on left. I still cant get the search form to work in Mazilla Firefox tho'

No I meant the one on my scrolling table page. Nothin to do with your table tho. I think the code was made for the search form before Mozilla was available
Cheers Chris

we are really thankful for this website.. we was in search of the content given in the table for few days....

really thankx...!!! thankx a lot..!!!!

Try this, it works perfectly. Tested in IE7, 8.
        div.encsheet {
            position:relative;
            margin:0px;
            overflow:visible;
            overflow-x:visible;
            overflow-y:visible;
        }
        div.encsheet thead tr td{
            position:relative;
         top: expression(offsetParent.scrollTop==0 ? 0+""+(offsetParent.scrollTop=-1)+""+(offsetParent.scrollTop=1) : offsetParent.scrollTop-2);
            left: expression(offsetParent.scrollTop==0 ? 0+""+(offsetParent.scrollTop=-1)+""+(offsetParent.scrollTop=1) : -1);
        }

This article is EXCELLENT!! I have visited many sites trying to figure out how to build a scrollable table with fixed header. Your site is the only one that showed me how to do it clearly and concisely. I am now following your you on Twitter. You should be sending out information about your articles regularly on Twitter. They are VERY helpful. Once again thanks.

I, like Gary in 2006, am looking at way of doing this that is also accessible to all our customers. Would you be able to send your reply to Gary also to me so we can research a solution that satisfies all our customers.

thanks
Sarah

Hi buddy,

I have implemented complete scrollable table with fixed header and footer using CSS and Javascript. This works fine in IE, Firefox and most importantly Google Chrome.

This may be helpful ;-)
http://s7u.blogspot.com

Regards,
Shahib