css - 在 GridView (ASP.NET) 中卡住/固定 header

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