Click here to Skip to main content
15,868,016 members
Articles / Web Development / HTML
Article

Freeze Footer in a table

Rate me:
Please Sign up or sign in to vote.
4.00/5 (6 votes)
3 Aug 2005CPOL1 min read 51.5K   578   13   4
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:

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

Here is the HTC code:

VBScript
<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)


Written By
Web Developer
Taiwan Taiwan
Writing Program is a interesting job.

Comments and Discussions

 
Generalinput type=&quot;text&quot; BUG Pin
gerbil123413-Oct-05 19:03
gerbil123413-Oct-05 19:03 
GeneralAdd a conditional statemant to solve the bug of endless loop Pin
Ejo Lin7-Aug-05 16:26
Ejo Lin7-Aug-05 16:26 
GeneralRe: Add a conditional statemant to solve the bug of endless loop Pin
jkarthik2k14-Aug-09 23:41
jkarthik2k14-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.