Use CSS styles to fix the table headers and specified columns of the DataGrid and GridView controls

Fixed Header:

Step 1: Add css code to the program, which can be saved as a separate file or referenced on the page.

The Css code is as follows:

. Fixed

{

Position: relative;

Table-layout: fixed;

Z-index: 10;

Top: expression (this. offsetParent. scrollTop );

}

. Fixed th

{

Text-overflow: ellipsis;

Overflow: hidden;

White-space: nowrap;

Padding: 2px;

}

Step 2: In the #. aspx. cs file background Page_LoadMediumReference Css code (you can also reference it in the head label of the #. aspx file. This is not described here)

The Code is as follows:

// ----- (Reference css in the subpage

HtmlLink CssControl = new HtmlLink ();

CssControl. Href = "~ /Css/Style.css "; // specify the path

CssControl. Attributes. Add ("rel", "stylesheet ");

Page. Header. Controls. Add (CssControl );

CssControl. Attributes. Add ("type", "text/css ");

//-----)))))

Step 3: reference

The Code is as follows:

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

<Asp: DataGrid ID = "DataGrid1" runat = "server">

<Columns>

...

</Columns>

...

<HeaderStyle... CssClass = "Fixed"/>

</Asp: DataGrid>

</Div>

Note: overflow-y: scroll is displayed as a vertical scroll bar. To fix the header, you must specify a fixed height.

Reference Css (CssClass = "Fixed") in the DATAGRID (GRIDVIEW) Header style ").

Step 4: reference the following code in the

The Code is as follows:

<Meta http-equiv = "X-UA-Compatible" content = "IE = EmulateIE7">

Note: This line of code indicates rendering in IE7 display mode in IE8.

 

Fixed specified column:

Step 1: Add css code to the program, which can be saved as a separate file or referenced on the page.

The Css code is as follows:

. FixCol

{

Position: relative;

Table-layout: fixed;

Z-index: 10;

Left: expression (this. offsetParent. scrollLeft );

}

Step 2: In the #. aspx. cs file background Page_LoadMediumReference Css code (you can also reference it in the head label of the #. aspx file. This is not described here)

The Code is as follows:

// ----- (Reference css in the subpage

HtmlLink CssControl = new HtmlLink ();

CssControl. Href = "~ /Css/Style.css "; // specify the path

CssControl. Attributes. Add ("rel", "stylesheet ");

Page. Header. Controls. Add (CssControl );

CssControl. Attributes. Add ("type", "text/css ");

//-----)))))

Step 3: reference

The Code is as follows:

<Div style = "overflow-x: scroll; width: 900px; height: auto;" id = "dvbody">

<Asp: DataGrid ID = "DataGrid1" runat = "server">

<Columns>

<Asp: BoundColumn DataField = "" HeaderText = "" ReadOnly = "True">

<HeaderStyle CssClass = "FixCol"/>

<ItemStyle CssClass = "FixCol"/>

</Asp: BoundColumn>

...

</Columns>

...

</Asp: DataGrid>

</Div>

Note: overflow-x: scroll is displayed as a horizontal scroll bar. To fix the specified column, you must specify a fixed width.

Reference Css (CssClass = "FixCol") in the style of the DATAGRID (GRIDVIEW) column ").

Step 4: reference the following code in the

The Code is as follows:

<Meta http-equiv = "X-UA-Compatible" content = "IE = EmulateIE7">

Note: This line of code indicates rendering in IE7 display mode in IE8.

 

Note: Only one method is specified here. You need to make minor adjustments according to the actual situation during the implementation process.