我有15个及以上列的gridview, 我需要使用以下css冻结gridview的标题:
.container
{
overflow: auto;
}
/* Keep the header cells positioned as we scroll */
.container table th
{
position: relative;
}
/* For alignment of the scroll bar */
.container table tbody
{
overflow-x: hidden;
}
网格的主体滚动得很好但是, 我的gridview标题不会在y轴上滚动。
我的网格视图代码如下。
<asp:gridview id="RadGrid1" runat="server" borderstyle="None" borderwidth="1px"
gridlines="Both" autogeneratecolumns="true" onrowcommand="OnSelectedChanged"
rowstyle-wrap="false" rowstyle-cssclass="container"
onrowdatabound="RadGrid1_RowDataBound" datakeynames="DocID,DocumentName">
<headerstyle cssclass="container" backcolor="LightBlue" wrap="false"
horizontalalign="Center" verticalalign="Middle" />
<selectedrowstyle backcolor="Red" wrap="false" />
<columns>
<asp:TemplateField>
<HeaderTemplate>
<input id="chkAll" onclick="javascript:SelectAllCheckboxes(this);"
runat="server" type="checkbox" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkSelect" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:ButtonField ButtonType="Link" HeaderText="View" Text="View" CommandName="view" />
<asp:ButtonField ButtonType="Link" HeaderText="Activity" Text="Activity" CommandName="activity" />
</columns>
</asp:gridview>
答案 0 :(得分:2)
文章:Grid View with fixed header
For the gridview to freez the header
div#gridPanel
{
width:900px;
overflow:scroll;
position:relative;
}
div#gridPanel th
{
top: expression(document.getElementById("gridPanel").scrollTop-2);
left:expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
position: relative;
z-index: 20;
}
<asp:Panel ID="gridPanel" runat="server" Height="200px" Width="100px" ScrollBars="Auto">
asp.net grid view