Feste Spaltenüberschriften Für ASP.NET Gridview
Habe ich eine ASP.NET Panel, das hat ein gridview-innerhalb der it. Unten ist das markup für Sie:
<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>
Habe ich den folgenden CSS-Code für das panel und 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;
}
Damit das gridview-Steuerelement zum Rendern mit thead-Elemente, Tue ich dies in der code-behind: this.gridMemberInfo.HeaderRow.TableSection = TableRowSection.TableHeader;
Da habe ich die panel-overflow auf auto gesetzt, ich kann scrollen, wenn das gridview hat eine Menge von Zeilen. Was möchte ich jetzt tun, ist, stellen Sie die header-Zeile fixiert, so kann ich immer sehen, dass es beim scrollen. Ich habe versucht Einstellung position:fixed;
im .datagrid table thead th
CSS-Klasse, aber das hat nicht funktioniert. Ich habe versucht, mehrere andere Optionen und kein Glück. Kann mir jemand helfen mit diesem?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Kannst du das nicht auf IE, da thead gilt nicht es mit css-interpreter. Sie implementieren müssen, um eine wapping div das deinen Header. oder verwenden Sie diejenigen, die es Taten, bevor : http://www.scientificpsychic.com/blogentries/html-and-css-scrolling-table-with-fixed-heading.html
oder Sie können einen Blick auf:
http://demos.devexpress.com/ASPxGridViewDemos/PagingAndScrolling/Scrolling.aspx
entnommen stack Antwort : Behoben-GridView-Header mit horizontalen und vertikalen Bildlauf in asp.net