Click here to Skip to main content
Click here to Skip to main content

Fixed headers in large HTML tables

, 24 Jun 2006
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.

Comments and Discussions

 
Questionnot working Pinmemberfahad1k30-Jul-14 19:09 
QuestionCreateScrollHeader(content, scrollHorizontal, scrollVertical) not working Pinmemberprasad_ssbt1-Jul-14 1:12 
AnswerRe: CreateScrollHeader(content, scrollHorizontal, scrollVertical) not working Pinmemberprasad_ssbt1-Jul-14 1:13 
GeneralGridView With Fixed Headers in Asp.Net Using C# and jQuery PinmemberBinu198521-Jun-14 0:06 
QuestionFreeze PinmemberMember 1027496926-Oct-13 0:40 
QuestionFreezing headers PinmemberPham Dinh Truong30-Jul-13 22:01 
QuestionThanks Pinmemberpistos20-Mar-13 4:12 
QuestionFix mutliple columns PinmemberMember 897905824-May-12 23:50 
AnswerRe: Fix mutliple columns PinmemberTalha Ashfaque24-Sep-12 3:56 
BugERROR PinmemberBudi Arsana24-May-12 7:13 
QuestionCan u provide me code for fixed header a Pinmemberanandkbpalle14-Feb-12 17:06 
QuestionMy "CreateScrollHeader" is called only from page "reload" function in code, not from "refresh" button in browser PinmemberMember 802713123-Jun-11 5:27 
Answer"iframe" and "frame" are the reason. PinmemberMember 802713129-Jun-11 5:14 
GeneralRe: But "search" and "checkbox" are not working PinmemberMember 802713129-Jun-11 5:17 
QuestionHow to set width & heigth PinmemberMember 779872930-Mar-11 5:15 
AnswerRe: How to set width & heigth PinmemberMember 779872930-Mar-11 21:25 
AnswerRe: How to set width & heigth PinmemberTalha Ashfaque24-Sep-12 3:57 
GeneralNice Work PinmemberShahib71330-Sep-10 10:17 
GeneralMy vote of 4 Pinmembermanas sinha15-Jul-10 19:44 
GeneralSupport for Firefox and Chrome PinmemberArne Møller4-Aug-09 4:51 
GeneralRe: Support for Firefox and Chrome [modified] PinmemberKeith Worden9-Jul-10 4:56 
GeneralFreezing multiple columns PinmemberSøren Christensen22-Apr-09 22:02 
GeneralRe: Freezing multiple columns Pinmemberoxid2-Jun-09 22:51 
GeneralRe: Freezing multiple columns Pinmembercyguard26-Aug-09 5:05 
QuestionDoes anyone have a demo posted somewhere that works on Firefox & Safari? Pinmembertactics233710-Apr-09 9:05 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    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 | Mobile
Web02 | 2.8.140827.1 | Last Updated 25 Jun 2006
Article Copyright 2006 by Karin Huber
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid