固定列标题ASP.NET的GridView [英] Fixed Column Headers For ASP.NET Gridview

问题描述

我有了它里面的GridView的ASP.NET面板。下面是它的标记：

I have an ASP.NET Panel that has a gridview inside of it. Below is the markup for it:

<asp:Panel runat="server" ID="searchResultsPanel" CssClass="datagrid" ClientIDMode="Static" style="display:none; max-height:500px; max-width:700px; overflow:auto;" >
    <asp:GridView runat="server" ID="gridMemberInfo" AutoGenerateColumns="false" EmptyDataText="No Members Were Found." OnRowCommand="Command_SearchGrid" ShowHeader="true" ShowHeaderWhenEmpty="true" >
        <PagerSettings Visible="false" />
        <AlternatingRowStyle CssClass="alt" />
        <Columns>
            <asp:ButtonField ButtonType="Link" Text="Select" CommandName="SelectRow" />
            <asp:BoundField  HeaderText="PMI"                DataField="PMI" />
            <asp:BoundField  HeaderText="Product"            DataField="Product" ItemStyle-Width="110px"  />
            <asp:BoundField  HeaderText="County"             DataField="County" />
            <asp:BoundField  HeaderText="Last Name"          DataField="LastName" />
            <asp:BoundField  HeaderText="First Name"         DataField="FirstName" />
            <asp:BoundField  HeaderText="Currently Enrolled" DataField="CurrentlyEnrolled" ItemStyle-Width="50px" />
        </Columns>
    </asp:GridView>
</asp:Panel>

我对面板和GridView下面的CSS：

I have the following CSS for the panel and gridview:

.datagrid table 
{ 
    border-collapse: collapse; 
    text-align: left; 
    width: 100%; 
} 

.datagrid 
{
    font: normal 12px/150% Arial, Helvetica, sans-serif; 
    background: #fff; 
    overflow: hidden; 
    border: 2px solid #006699; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
}

.datagrid table td, .datagrid table th 
{ 
    padding: 3px 10px; 
}

.datagrid table thead th 
{
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #00A2F2), color-stop(1, #002C42) );
    background:-moz-linear-gradient( center top, #00A2F2 5%, #002C42 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00A2F2', endColorstr='#002C42');
    background-color:#00A2F2; 
    color:#FFFFFF; 
    font-size: 12px; 
    font-weight: bold; 
    border: none;
} 

.datagrid table thead th:first-child 
{ 
    border: 3px; 
}

.datagrid table tbody td
{ 
    color: #00496B; 
    font-size: 12px;
    font-weight: normal; 
}

.datagrid table tbody .alt td 
{ 
    background: #E1EEF4; 
    color: #00496B; 
}

.datagrid table tbody td:first-child 
{ 
    border-left: none; 
}

.datagrid table tbody tr:last-child td 
{ 
    border-bottom: none; 
}

为了为GridView呈现与THEAD元素，我这样做是在code背后： this.gridMemberInfo.HeaderRow.TableSection = TableRowSection.TableHeader;

In order for the gridview to render with thead elements, I do this in the code behind: this.gridMemberInfo.HeaderRow.TableSection = TableRowSection.TableHeader;

由于我在面板的溢出设置为auto，我可以滚动，当在GridView有很多行。我想现在要做的是让标题行固定的，所以，我总能看到它，而滚动。我已经尝试设置的位置是：固定;在 .datagrid表THEAD日 CSS类但是这并没有奏效。我曾尝试其他几个选项并没有运气。有人可以帮我这个？

Since I have the panel's overflow set to auto, I can scroll when the gridview has alot of rows. What I would like to do now is make the header row fixed so that I can always see it while scrolling. I have tried setting position:fixed; in the .datagrid table thead th CSS class but that hasn't worked. I have tried several other options and no luck. Can someone help me out with this?

推荐答案

您不能这样做的IE浏览器，因为THEAD不被视为与有CSS跨preTER。你将需要实施沃平的div会握住你的头。或者使用那些以前做过：<一href=\"http://www.scientificpsychic.com/blogentries/html-and-css-scrolling-table-with-fixed-heading.html\" rel=\"nofollow\">http://www.scientificpsychic.com/blogentries/html-and-css-scrolling-table-with-fixed-heading.html

You cannot do that on IE, since thead is not regarded with there css interpreter. you will need to implement a wapping div that will hold your headers. or use ones that did it before : http://www.scientificpsychic.com/blogentries/html-and-css-scrolling-table-with-fixed-heading.html

或者你可以看看：

的http://demos.devex$p$pss.com/ASPxGridViewDemos/PagingAndScrolling/Scrolling.aspx

这堆取答案：固定的GridView头在asp.net水平和垂直滚动

这篇关于固定列标题ASP.NET的GridView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！