ASP.NET GridView/Table , set immovable/fixed header,footer and pager via CSS

CSS :

 

.FreezingHeader

{

   position:relative ;

   top:expression(this.offsetParent.scrollTop -12);

   z-index: 10;

}

.FreezingFooter

{

   position: relative;

   overflow-x: hidden;

   top: expression(parentNode.parentNode.offsetHeight >= offsetParent.offsetHeight ? 0 - parentNode.parentNode.offsetHeight + offsetParent.offsetHeight + offsetParent.scrollTop - 25 : 0);

}

.FreezingPager

{

   position: relative;

   overflow-x: hidden;

   top: expression(parentNode.parentNode.offsetHeight >= offsetParent.offsetHeight ? 0 - parentNode.parentNode.offsetHeight + offsetParent.offsetHeight + offsetParent.scrollTop - 25 : 0);

}

 

 

GRID MARKUP :

 

<div style="height:550px;overflow: scroll;width: 100%;position: relative;">

<asp:GridView ID="gridCounterparties" runat="server" AutoGenerateColumns="False"

                        AllowSorting="True" Width="100%" AllowPaging="True" ShowFooter="true"

                        onpageindexchanged="grid_PageIndexChanged"

                        onpageindexchanging="grid_PageIndexChanging"

                        onrowcommand="grid_RowCommand"

                        onrowcreated="grid_RowCreated"

                        onrowdatabound="grid_RowDataBound"

                        onsorting="grid_Sorting">

                        <PagerSettings Mode="Numeric" Visible="true" PageButtonCount="10" Position="Bottom" />

                        <PagerStyle CssClass="FreezingPager" BackColor="Aqua" />

                        <FooterStyle CssClass="FreezingFooter" BackColor="Aqua" />

                        <HeaderStyle CssClass="FreezingHeader" ForeColor="White"/>

 

                        <Columns>…

 

With the above CSS style, there are issues if your grid page has number of records overflow the height, but has less then grid page size. Meaning if alphabetical paging footer appear but not numerical paging. To fix the issue alphabetical paging footer should change the top value based on if the numerical paging is precent.

.FreezingFooter
{
position: relative;
overflow-x: hidden;
top: expression(parentNode.parentNode.offsetHeight >= offsetParent.offsetHeight ? 0 - parentNode.parentNode.offsetHeight + offsetParent.offsetHeight + offsetParent.scrollTop + (this.nextSibling ? -5 : -10) : 0);
}
.FreezingPager
{
position: relative;
overflow-x: hidden;
top: expression(parentNode.parentNode.offsetHeight >= offsetParent.offsetHeight ? 0 - parentNode.parentNode.offsetHeight + offsetParent.offsetHeight + offsetParent.scrollTop - 5 : 0);
}

Reference http://home.roadrunner.com/~bmerkey/examples/nonscroll-table-header.html