Click here to Skip to main content
12,406,795 members (60,983 online)
Click here to Skip to main content
Add your own
alternative version

Stats

265.6K views
9K downloads
52 bookmarked
Posted

Fixed headers in large HTML tables

, 24 Jun 2006 CPOL
Rate this:
Please Sign up or sign in to vote.
There are quite a lot of ways to fix the header column and rows in HTML tables. But when tables become larger, most of them are not useful because scrolling gets far too slow. In this article, I will show an applicable way for IE.

Introduction

There are quite a lot of ways to fix the header column and rows in HTML tables. But when tables become larger, most of them are not useful because scrolling gets far too slow. In the following sample, I will show an applicable way for IE.

My HTML page contains two divs and a table.

...
<div id="outerDiv">
 <div id="innerDiv">
  <table>
   ...
  </table>
 </div>
</div>
...

In my sample, the table looks like this (the red border shows the innerDiv):

Sample screenshot

The main idea is to copy the innerDiv with the table three times so that there is a div each for the header row, the header column, the first cell in the header row, and the body of the table.

  • In the first three divs, overflow must be set to hidden.
  • In the body div, overflow can be set to scroll if the body is larger then the available space. Furthermore, the table in the body div needs to be positioned absolutely. Top and Left positions have to be negative (Top = -height of header row, Left = -width of header column) so that the headers are no more visible than the body div.

By copying the whole table, all rows and columns will have equal width and height. If you would only copy the first row of the table to the header div, column width in the header could differ from the body columns. After copying the divs, my outerDiv contains four innerDivs (the red borders show the innerDivs):

Sample screenshot

Finally, the divs have to scroll synchronously. When you scroll to the right, the header row has to move to the right too, and when you scroll to the bottom, the header column needs to move too. I found a nice way to do this here.

Sample screenshot

You can view an online demo here.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Karin Huber
Software Developer software architects
Austria Austria
Hi, my name is Karin Huber. Since 1998 I have been working as a developer and IT consultant focusing on building database oriented web applications. In 2007 my friend Rainer and I decided that we want to build a business based on COTS (component off-the-shelf) software. As a result we founded "software architects".

These days we are offering our first version of the time tracking software called 'time cockpit'. You can find more information at www.timecockpit.com.

You may also be interested in...

Comments and Discussions

 
QuestionCan u tell me on C# programing Fixed headers in large tables Pin
Member 1206281215-Oct-15 20:33
memberMember 1206281215-Oct-15 20:33 
QuestionThrowing error Pin
Member 291225510-Apr-15 10:51
memberMember 291225510-Apr-15 10:51 
QuestionWhy can't I scroll in modern browser ? Pin
DungPSNV28-Feb-15 5:46
memberDungPSNV28-Feb-15 5:46 
QuestionLine: 111 Error: 'divContent.childNodes.0.style' is null or not an object Pin
DungVanNguyen8-Feb-15 22:34
memberDungVanNguyen8-Feb-15 22:34 
AnswerRe: Line: 111 Error: 'divContent.childNodes.0.style' is null or not an object Pin
Member 291225510-Apr-15 11:28
memberMember 291225510-Apr-15 11:28 
QuestionIs this for IE Only? Pin
fandisus22-Oct-14 2:46
memberfandisus22-Oct-14 2:46 
AnswerRe: Is this for IE Only? Pin
Member 291225510-Apr-15 11:35
memberMember 291225510-Apr-15 11:35 
Questionproblem in script when i use your code for scrolling in html table Pin
Member 106694318-Sep-14 23:57
memberMember 106694318-Sep-14 23:57 
QuestionHow can you set table width and height ? Only works with window size Pin
cramtadlos1-Sep-14 11:20
membercramtadlos1-Sep-14 11:20 
Questionnot working Pin
fahad1k30-Jul-14 19:09
memberfahad1k30-Jul-14 19:09 
QuestionCreateScrollHeader(content, scrollHorizontal, scrollVertical) not working Pin
prasad_ssbt1-Jul-14 1:12
memberprasad_ssbt1-Jul-14 1:12 
AnswerRe: CreateScrollHeader(content, scrollHorizontal, scrollVertical) not working Pin
prasad_ssbt1-Jul-14 1:13
memberprasad_ssbt1-Jul-14 1:13 
GeneralGridView With Fixed Headers in Asp.Net Using C# and jQuery Pin
Binu198521-Jun-14 0:06
memberBinu198521-Jun-14 0:06 
QuestionFreeze Pin
Member 1027496926-Oct-13 0:40
memberMember 1027496926-Oct-13 0:40 
QuestionFreezing headers Pin
Pham Dinh Truong30-Jul-13 22:01
memberPham Dinh Truong30-Jul-13 22:01 
QuestionThanks Pin
pistos20-Mar-13 4:12
memberpistos20-Mar-13 4:12 
QuestionFix mutliple columns Pin
Member 897905824-May-12 23:50
memberMember 897905824-May-12 23:50 
AnswerRe: Fix mutliple columns Pin
Talha Ashfaque24-Sep-12 3:56
memberTalha Ashfaque24-Sep-12 3:56 
BugERROR Pin
Budi Arsana24-May-12 7:13
memberBudi Arsana24-May-12 7:13 
QuestionCan u provide me code for fixed header a Pin
anandkbpalle14-Feb-12 17:06
memberanandkbpalle14-Feb-12 17:06 
QuestionMy "CreateScrollHeader" is called only from page "reload" function in code, not from "refresh" button in browser Pin
Member 802713123-Jun-11 5:27
memberMember 802713123-Jun-11 5:27 
Answer"iframe" and "frame" are the reason. Pin
Member 802713129-Jun-11 5:14
memberMember 802713129-Jun-11 5:14 
GeneralRe: But "search" and "checkbox" are not working Pin
Member 802713129-Jun-11 5:17
memberMember 802713129-Jun-11 5:17 
QuestionHow to set width & heigth Pin
Member 779872930-Mar-11 5:15
memberMember 779872930-Mar-11 5:15 
AnswerRe: How to set width & heigth Pin
Member 779872930-Mar-11 21:25
memberMember 779872930-Mar-11 21:25 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.160730.1 | Last Updated 25 Jun 2006
Article Copyright 2006 by Karin Huber
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid