Заморозить заголовки gridview только на вертикальной прокрутке

Question

У меня есть вид сетки, который шире, чем моя страница aspx, поэтому мне нужно, чтобы заголовки вида сетки прокручивались с помощью горизонтальной полосы прокрутки, но оставались фиксированными с помощью вертикальной полосы прокрутки. Как мне добиться этого? пожалуйста помоги? после большого количества поисков, я попытался с различными классами CSS, поместив свою сетку в панель Div, но это блокирует оба заголовка в обоих направлениях, горизонтальном и вертикальном. Пожалуйста, помогите мне исправить заголовки только на вертикальной прокрутке.

часть моей страницы aspx

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
                                <div runat="server" id="GridViewDiv" style="overflow:auto" >
                                <asp:HiddenField ID="BindOnPostBack" Value="1" runat="server" /> 
                                    <asp:GridView Width="100%" ID="ProjectsGridView" runat="server" AutoGenerateColumns="false"
                                        OnRowCreated="BudgetGridView_RowCreated"  OnRowDataBound="BudgetGridView_RowDataBound" PagerSettings-Visible="true" PageSize="20"
                                        AllowPaging="true" AllowSorting="true" RowStyle-BackColor="#E8EAF7" RowStyle-BorderColor="White"
                                        RowStyle-Height="19px" RowStyle-Font-Size="11px" RowStyle-HorizontalAlign="Left"
                                        RowStyle-VerticalAlign="Middle" RowStyle-Font-Names="Tahoma,Helvetica,Arial"
                                        HeaderStyle-BackColor="#d1d5ef" HeaderStyle-Height="22px" HeaderStyle-HorizontalAlign="Left"
                                        HeaderStyle-Font-Names="Tahoma,Helvetica,Arial" HeaderStyle-Font-Size="13px"
                                        HeaderStyle-Wrap="false" HeaderStyle-Font-Underline="false" RowStyle-Wrap="false"
                                        PagerSettings-Position="Top" DataKeyNames="ID">


and my css for this:

div#GridViewDiv { 
width: expression(document.getElementById("ctl00_contentPanel").style.width); 
height: expression(document.getElementById("contentdiv").style.width);
overflow: scroll; 
position: relative; 
}

div#GridViewDiv th {   
top: expression(document.getElementById("GridViewDiv").scrollTop - 2); 
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft); 
position: relative; 
z-index: 50;
} 

td.locked, th.locked {
position:relative;    
left:expression((this.parentElement.parentElement.parentElement.parentElement.scrollLeft-2)+'px');
}

Answer 1

position:fixed; свойство будет фиксировать компонент на месте в зависимости от браузера.