Fixed Header Grid View ASP.NET

问题

I gone through lots of examples for fixed header grid view, and tried few options using div and java scripts. the one i didnot work from the example, is there anything i miss here.

 CSS 
.gridViewHeader
{
     background-color:Navy;
    color:blue;
    font-size:12px;
    font-weight:bold;
    position:relative;
    z-index:10;
   top:expression(<%= gv.HeaderRow %>.offsetParent.scrollTop-2);
}

design source
<table>
<tr>
            <td>
                &nbsp;
            </td>
        </tr>
    </table>
    <div>
        <asp:GridView ID="gv" runat="server" CellPadding="4" PageSize="50" RowHeaderColumn="True"
            AllowPaging="True" BackColor="White" BorderColor="#3366CC" BorderStyle="None"
            BorderWidth="1px" CssClass="gridViewHeader">
            <PagerSettings Mode="NumericFirstLast" />
            <PagerStyle BackColor="#99CCCC" ForeColor="#003399" HorizontalAlign="Left" VerticalAlign="Middle" />
            <RowStyle BackColor="White" ForeColor="#003399" BorderStyle="Inset" HorizontalAlign="Center"
                VerticalAlign="Middle" Wrap="False" />
            <SelectedRowStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
        </asp:GridView>
    </div>
        <asp:HiddenField ID="hiddenfield1" runat="server"  />
    </asp:Content>

回答1:

you can use

<HeaderStyle CssClass="gridViewHeader" />

For your sample

<asp:GridView ID="gv" runat="server" CellPadding="4" PageSize="50" RowHeaderColumn="True"
            AllowPaging="True" BackColor="White" BorderColor="#3366CC" BorderStyle="None"
            BorderWidth="1px" >

            <HeaderStyle CssClass="gridViewHeader" />

            <PagerSettings Mode="NumericFirstLast" />
            <PagerStyle BackColor="#99CCCC" ForeColor="#003399" HorizontalAlign="Left" VerticalAlign="Middle" />
            <RowStyle BackColor="White" ForeColor="#003399" BorderStyle="Inset" HorizontalAlign="Center"
                VerticalAlign="Middle" Wrap="False" />
            <SelectedRowStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
        </asp:GridView>

回答2:

This CSS will fix your problem:

.GVFixedHeader { font-weight:bold; background-color: Green; position:relative; 
             top:expression(this.parentNode.parentNode.parentNode.scrollTop-1);}

回答3:

I just did this very thing. I used this article as a reference.

http://csharpdotnetfreak.blogspot.com/2009/07/scrollable-gridview-fixed-headers-asp.html

The trick is to create a table and then place the grid inside a div just under the that table. Set the width of the detail cells the same width as the cells in the gridview. Then make sure the scroll bar stays on and then the grid and the table will line up in the event there are not enough rows to actually need the scrolling function.

来源：https://stackoverflow.com/questions/12163402/fixed-header-grid-view-asp-net

标签

ASP.NET

html

gridview