Click here to Skip to main content
13,558,603 members
Click here to Skip to main content
Add your own
alternative version


13 bookmarked
Posted 3 Aug 2005
Licenced CPOL

Freeze Footer in a table

, 3 Aug 2005
Rate this:
Please Sign up or sign in to vote.
An article on how to have fixed footer rows in a table.

Sample Image


Excel freeze is a user friendly feature. In this project of David R Lewis, he provides us a good solution to freeze the header and first column of a table. I tried to find more useful features. Freeze footer is today's subject. The project source code above provides a simple HTML page and a HTC file to demo how to do it.


When we have a summary row in the bottom of a table, we want to compare it with other rows. When you scroll the table, it had better stay at the bottom of the table. According to the project of David R Lewis, we need to add a HTC outside the Div object of a table. If you want to know more information about HTC, you can refer MSDN:HTC Reference. Then, you need add <tfoot> and </tfoot> tags between your summary row. Then, write a CSS for <foot> to present freeze footer.

Using the code

  1. Add div tag with HTC file outside the target table.
  2. Add <tfoot> and </foot> tags outside those freeze footer rows.
  3. Add CSS style.

Here is the CSS code for freeze footer:

/* To provide fixed footer */
tfoot tr {
 top: expression(parentNode.parentNode.parentNode.TopOfFooter); /* IE5+ only */
 position: relative;
 z-index: 20;

Here is the HTC code:

<PUBLIC:property NAME="TopOfFooter" value="20" GET="getTopOfFooter" />
' -----------------------------------------------------------------------------
' Ejo write in 2005/7/30
' support freeze footer
'  mailto:
' -----------------------------------------------------------------------------
<script language="VBScript">
option explicit
dim heightOfScrollBar
heightOfScrollBar = 20

function getTopOfFooter()
 '   parentNode.parentNode.parentNode.scrollTop
 ' + parentNode.parentNode.parentNode.offsetHeight
 ' - parentNode.parentNode.parentNode.scrollHeight
 ' - Height of scroll bar
 dim HeightBar
 ' check whether horizontal scroll bar exists
 if element.scrollWidth > element.offsetWidth then
  HeightBar = heightOfScrollBar
  HeightBar = 0
 end if
 ' check, if height of table (plus height of horizontal
 ' scroll bar) is smaller than outside object,
 ' change top of footer row, or do NOT change it (keep it as 0)
 if element.offsetHeight + HeightBar <= element.scrollHeight then
  getTopOfFooter = element.scrollTop + element.offsetHeight_
                          - element.scrollHeight - HeightBar
  getTopOfFooter = 0
 end if
end function

Points of Interest

Here is the illustration of how to calculate the top location of freeze rows:

Sample Image


Here is a bug. I don't know how to solve it easily. That is, I have no idea to get the height of the horizontal scroll bar of the client browser. If this value is wrong, it might cause an endless loop. Maybe, you have related experiences. If you have any solution, please let me know.


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


About the Author

Ejo Lin
Web Developer
Taiwan Taiwan
Writing Program is a interesting job.

You may also be interested in...

Comments and Discussions

GeneralGridView With Fixed Headers in Asp.Net Using C# and jQuery Pin
Binu198521-Jun-14 0:01
memberBinu198521-Jun-14 0:01 
Generalinput type=&quot;text&quot; BUG Pin
gerbil123413-Oct-05 19:03
membergerbil123413-Oct-05 19:03 
GeneralAdd a conditional statemant to solve the bug of endless loop Pin
Ejo Lin7-Aug-05 16:26
memberEjo Lin7-Aug-05 16:26 
GeneralRe: Add a conditional statemant to solve the bug of endless loop Pin
jkarthik2k14-Aug-09 23:41
memberjkarthik2k14-Aug-09 23:41 

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
Web03-2016 | 2.8.180515.1 | Last Updated 4 Aug 2005
Article Copyright 2005 by Ejo Lin
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid