Css implementation for Fixed Grid headers and fixed columns

<Style>
. Freezing
{

Position: relative;
Table-layout: fixed;
Top: expression (this. offsetParent. scrollTop );
Z-index: 10;
}

. Freezing th {text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 2px ;}
</Style>

 

<Div style = "overflow-y: scroll; height: 200px; width: 300px" id = "dvBody">

<Asp: GridView ID = "GridView1" runat = "server "......

.....

 

<HeaderStyle BackColor = "#006699" Font-Bold = "True" ForeColor = "White" CssClass = "Freezing"/>
</Asp: GridView>
</Div>

 

Usage: CSS is set to the above style, HeaderStyle plus CssClass = "Freezing, set the height width of the Div in the GridView <div style =" overflow-y: scroll; height: 200px; width: 200px ">

 

Another method of css writing

. Fixedheadercell
{
FONT-WEIGHT: bold;
FONT-SIZE: 10pt;
WIDTH: 200px;
COLOR: white;

BACKGROUND-COLOR: darkblue;
}
 
. Fixedheadertable
{
Left: 0px;
Position: relative;
Top: 0px;
Padding-right: 2px;
Padding-left: 2px;
Padding-bottom: 2px;
Padding-top: 2px;
}
 
. Gridcell
{
WIDTH: 200px;
}

 

Css for fixed columns

. FixedHeaderTr
{
Background-color: whitesmoke;
Z-index: 10;
Position: relative;
Top: expression (this. offsetParent. scrollTop );
}
It is better to use css.

 

Fixed bar, I guess it is

. Freezing
{

Position: relative;
Table-layout: fixed;
Left: expression (this. offsetParent. scrollLeft );
Z-index: 10;
}

. Freezing td {text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 2px ;}

 

 

Http://www.codeproject.com/KB/webforms/FreezePaneDatagrid.aspx

 

/* Div container to wrap the datagrid */
Div # div-datagrid {
Width: 420px;
Height: 200px;
Overflow: auto;
Scrollbar-base-color: # ffeaff;
}

/* Locks the left column */
Td. locked, th. locked {
Font-size: 7pt;
Text-align: left;
Background-color: inherit;
Font-weight: bold;
Position: relative;
Cursor: default;
Left: expression (document. getElementById ("div-datagrid"). scrollLeft-2);/* IE5 + only */
}

/* Locks table header */
Th {
Font-size: 7pt;
Font-weight: bold;
Text-align: center;
Background-color: navy;
Color: white;
Font-weight: bold;
Height: 15pt;
Border-right: 1px solid silver;
Position: relative;
Cursor: default;
Top: expression (document. getElementById ("div-datagrid"). scrollTop-2);/* IE5 + only */
Z-index: 10;
}

/* Keeps the header as the top most item. Important for top left item */
Th. locked {z-index: 99; text-align: center ;}

/* DataGrid Item and AlternatingItem Style */
. GridRow {font-size: 7pt; color: black; font-family: Verdana; background-color: # ffffff; height: 15px ;}
. GridAltRow {font-size: 7pt; color: black; font-family: Verdana; background-color: # eeeeee; height: 15px ;}

Http://www.codeproject.com/KB/aspnet/FreezeHeader.aspx