GridViewのフリーズ/固定ヘッダー（ASP.NET）

Question

ダミーデータを含むgridviewがあります。私は上下にスクロールしながら上にヘッダーをフリーズしたいと思います。

これは私のコードですが、それは動作しません...

.grid { 
    height: 500px; 
    overflow: auto; 

} 

.box { 
    height: 520px; 
    border: 5px solid black; 
    margin-left: 50px; 
    margin-right: 50px; 
} 

.mydatagrid { 
    width: 100%; 
    border: solid 2px black; 
    min-width: 80%; 
} 

.header { 
    position: fixed; 
    background-color: #000; 
    font-family: Arial; 
    color: White; 
    height: 25px; 
    text-align: center; 
    font-size: 16px; 
} 

.rows { 
    background-color: #fff; 
    font-family: Arial; 
    font-size: 14px; 
    color: #000; 
    min-height: 25px; 
    text-align: left; 
} 

    .rows:hover { 
     background-color: #5badff; 
     color: #fff; 
    } 

.mydatagrid a /** FOR THE PAGING ICONS **/ { 
    background-color: Transparent; 
    padding: 5px 5px 5px 5px; 
    color: #fff; 
    text-decoration: none; 
    font-weight: bold; 
} 

    .mydatagrid a:hover /** FOR THE PAGING ICONS HOVER STYLES**/ { 
     background-color: #000; 
     color: #fff; 
    } 

.mydatagrid span /** FOR THE PAGING ICONS CURRENT PAGE INDICATOR **/ { 
    background-color: #fff; 
    color: #000; 
    padding: 5px 5px 5px 5px; 
} 

.pager { 
    background-color: #5badff; 
    font-family: Arial; 
    color: White; 
    height: 30px; 
    text-align: left; 
} 

.mydatagrid td { 
    padding: 5px; 
} 

.mydatagrid th { 
    padding: 5px; 
} 

これは私のGridViewのコードの一部です：

<asp:GridView AutoGenerateColumns="false" ID="gvUsers" runat="server" 
        HeaderStyle-CssClass="header" RowStyle-CssClass="rows"   
        CssClass="mydatagrid" AllowPaging="False" 
        ShowHeaderWhenEmpty="true" 
        OnRowDeleting="gvUsers_RowDeleting" DataKeyNames="UserID" 
        BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3"> 
        <FooterStyle BackColor="White" ForeColor="#000066" /> 
        <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" /> 
</asp:GridView> 

私はCSSでヘッダースタイリング休憩をposition: fixed;を使用完全に。下の画像を参照してください。私もposition: absoluteを使用しましたが、まだ何もしません。

お知らせください。ありがとう。

Answer 1

私はそうは考えていません。グリッドビューはテーブルを作成し、テーブルのヘッダーをフリーズすることはできません。あなたができることは、見出しのための別のテーブルを作成し、それをgridview/tableの上に置くことです。例：How to make responsive table and header fixed both on same html table