Click here to Skip to main content
15,868,109 members
Articles / Programming Languages / Javascript
Article

Fixed headers in large HTML tables

Rate me:
Please Sign up or sign in to vote.
4.76/5 (34 votes)
24 Jun 2006CPOL2 min read 370.4K   10.7K   53   73
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.

HTML
...
<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)


Written By
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.

Comments and Discussions

 
QuestionUncaught Error: Cannot read property 'childNodes'! Pin
rchattler12-Sep-17 11:02
rchattler12-Sep-17 11:02 
QuestionCan u tell me on C# programing Fixed headers in large tables Pin
RaviReddyEmani15-Oct-15 20:33
RaviReddyEmani15-Oct-15 20:33 
QuestionThrowing error Pin
Member 291225510-Apr-15 10:51
Member 291225510-Apr-15 10:51 
QuestionWhy can't I scroll in modern browser ? Pin
DungPSNV28-Feb-15 5:46
DungPSNV28-Feb-15 5:46 
QuestionLine: 111 Error: 'divContent.childNodes.0.style' is null or not an object Pin
DungVanNguyen8-Feb-15 22:34
DungVanNguyen8-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
Member 291225510-Apr-15 11:28 
QuestionIs this for IE Only? Pin
fandisus22-Oct-14 2:46
fandisus22-Oct-14 2:46 
AnswerRe: Is this for IE Only? Pin
Member 291225510-Apr-15 11:35
Member 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
Member 106694318-Sep-14 23:57 
QuestionHow can you set table width and height ? Only works with window size Pin
cramtadlos1-Sep-14 11:20
cramtadlos1-Sep-14 11:20 
Questionnot working Pin
fahad1k30-Jul-14 19:09
fahad1k30-Jul-14 19:09 
QuestionCreateScrollHeader(content, scrollHorizontal, scrollVertical) not working Pin
prasad_ssbt1-Jul-14 1:12
prasad_ssbt1-Jul-14 1:12 
AnswerRe: CreateScrollHeader(content, scrollHorizontal, scrollVertical) not working Pin
prasad_ssbt1-Jul-14 1:13
prasad_ssbt1-Jul-14 1:13 
QuestionFreeze Pin
Member 1027496926-Oct-13 0:40
Member 1027496926-Oct-13 0:40 
QuestionFreezing headers Pin
Pham Dinh Truong30-Jul-13 22:01
professionalPham Dinh Truong30-Jul-13 22:01 
QuestionThanks Pin
pistos20-Mar-13 4:12
pistos20-Mar-13 4:12 
QuestionFix mutliple columns Pin
Member 897905824-May-12 23:50
Member 897905824-May-12 23:50 
AnswerRe: Fix mutliple columns Pin
Talha Ashfaque24-Sep-12 3:56
Talha Ashfaque24-Sep-12 3:56 
BugERROR Pin
Budi Arsana24-May-12 7:13
Budi Arsana24-May-12 7:13 
QuestionCan u provide me code for fixed header a Pin
anandkbpalle14-Feb-12 17:06
anandkbpalle14-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
Member 802713123-Jun-11 5:27 
Answer"iframe" and "frame" are the reason. Pin
Member 802713129-Jun-11 5:14
Member 802713129-Jun-11 5:14 
GeneralRe: But "search" and "checkbox" are not working Pin
Member 802713129-Jun-11 5:17
Member 802713129-Jun-11 5:17 
QuestionHow to set width & heigth Pin
Member 779872930-Mar-11 5:15
Member 779872930-Mar-11 5:15 
AnswerRe: How to set width & heigth Pin
Member 779872930-Mar-11 21:25
Member 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.