Click here to Skip to main content
Click here to Skip to main content
Go to top

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

Introduction

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.

Background

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:COMPONENT>
<PUBLIC:property NAME="TopOfFooter" value="20" GET="getTopOfFooter" />
' -----------------------------------------------------------------------------
' Ejo write in 2005/7/30
' support freeze footer
'  mailto: ejo_lin@gocyberlink.com
' -----------------------------------------------------------------------------
<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
 else
  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
 else
  getTopOfFooter = 0
 end if
end function
</script>
</PUBLIC:COMPONENT>

Points of Interest

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

Sample Image

Notice

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.

License

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

Share

About the Author

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

Comments and Discussions

 
GeneralGridView With Fixed Headers in Asp.Net Using C# and jQuery PinmemberBinu198521-Jun-14 0:01 
Generalinput type=&quot;text&quot; BUG Pinmembergerbil123413-Oct-05 19:03 
GeneralAdd a conditional statemant to solve the bug of endless loop PinmemberEjo Lin7-Aug-05 16:26 
GeneralRe: Add a conditional statemant to solve the bug of endless loop Pinmemberjkarthik2k14-Aug-09 23:41 

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.140916.1 | Last Updated 4 Aug 2005
Article Copyright 2005 by Ejo Lin
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid