GridView의 고정/고정 헤더

Question

더미 데이터가있는 gridview가 있습니다. 위아래로 스크롤하면서 머리글을 고정하고 싶습니다. 내가 헤더 스타일링 휴식 내 CSS에서 position: fixed;를 사용하는 경우

<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> 

: 이것은 내의 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; 
} 

이 내 코드이지만이 작동하지 않습니다 ... 완전히. 아래 이미지를 참조하십시오. 나는 또한 position: absolute을 사용했지만 여전히 아무것도하지 않습니다.

알려 주시기 바랍니다. 감사.

Answer 1

나는 그렇게 생각하지 않습니다. gridview는 테이블을 만들고 테이블의 헤더를 고정 할 수 없습니다. 당신이 할 수있는 최선의 방법은 표제에 대한 별도의 표를 만들어 gridview/표 위에 배치하는 것입니다. 예 : How to make responsive table and header fixed both on same html table