Click here to Skip to main content
12,828,476 members (49,397 online)
Click here to Skip to main content
Add your own
alternative version


52 bookmarked
Posted 24 Jun 2006

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.


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">

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.


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


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

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 21:33
memberMember 1206281215-Oct-15 21:33 
QuestionThrowing error Pin
Member 291225510-Apr-15 11:51
memberMember 291225510-Apr-15 11:51 
QuestionWhy can't I scroll in modern browser ? Pin
DungPSNV28-Feb-15 6:46
memberDungPSNV28-Feb-15 6:46 
QuestionLine: 111 Error: '' is null or not an object Pin
DungVanNguyen8-Feb-15 23:34
memberDungVanNguyen8-Feb-15 23:34 
AnswerRe: Line: 111 Error: '' is null or not an object Pin
Member 291225510-Apr-15 12:28
memberMember 291225510-Apr-15 12:28 
QuestionIs this for IE Only? Pin
fandisus22-Oct-14 3:46
memberfandisus22-Oct-14 3:46 
AnswerRe: Is this for IE Only? Pin
Member 291225510-Apr-15 12:35
memberMember 291225510-Apr-15 12:35 
Questionproblem in script when i use your code for scrolling in html table Pin
Member 106694319-Sep-14 0:57
memberMember 106694319-Sep-14 0:57 
QuestionHow can you set table width and height ? Only works with window size Pin
cramtadlos1-Sep-14 12:20
membercramtadlos1-Sep-14 12:20 
Questionnot working Pin
fahad1k30-Jul-14 20:09
memberfahad1k30-Jul-14 20:09 

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.

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