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创建一个表，您无法冻结表上的标题。您可以做的最好的事情是为标题创建一个单独的表格，并将其放置在gridview /表格上方。例如：How to make responsive table and header fixed both on same html table