在 GridView (ASP.NET) 中冻结/固定标题

Question

我有一个带有虚拟数据的网格视图。我想在上下滚动时冻结顶部的标题。

这是我的代码，但它不起作用...

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