Locking ListView’s Header and Footer with CSS
Due to some usability issues and real estate gains on the user inteface, I was thinking to find a way to lock the header (and footer as well if applicable) of a ListView control. After some googling, I found a great resource by Brett Merkey which can be easily implemented to the ListView.
I am not a CSS guru but I was brave enough to play around with the original CSS that I got from that resource, and organized my ListView’s LayoutTemplate as:

Newly modified CSS code is:

After debugging the application file with this new stylesheet, I have:

Download
I have tested my sample code with Firefox, IE6 and IE7; and everything was seeming to work fine. You can download it via here.
I wasn’t get same listview. Header and footer locking but scroll is different.
Rasheed,
The last screenshot was captured via Firefox. Since different browsers have different interpretations for some CSS objects, the result might be different in IE (if that’s your case). I guess - as long as header and footer rows are locked, you should be fine.
Hi Mustafa,
Can you explain what it does in details?
expression(parentNode.parentNode.offsetHeight >= offsetParent.offsetHeight ? 0 - parentNode.parentNode.offsetHeight + offsetParent.offsetHeight + offsetParent.scrollTop : 0);
Best, William
William,
As mentioned at the beginning of this post, the CSS part of my sample code was taken from here:
http://home.tampabay.rr.com/bmerkey/examples/nonscroll-table-header.html
According to this resource, IE may have some problems with the screen behavior of the footer row in an HTML table. That expression is for having a modern footer in IE6 and IE7.
Hope this helps.
How can I get the scroll offsets for the table?