为什么冻结 GridView 标头不起作用

Question

我在Panel 中有以下GridView，其中overflow: scroll 允许滚动：

<asp:Panel runat="server" ClientIDMode="Static" ID="pnlScroll" CssClass="pnlScroll">
    <asp:GridView AlternatingRowStyle-BackColor="#E2E2E2" AutoGenerateColumns="false" OnSorting="yourTasksGV_Sorting" AllowSorting="true" ID="yourTasksGV" runat="server" ClientIDMode="Static" EmptyDataText="There is no data to display" OnRowDataBound="yourTasksGV_RowDataBound">
        <HeaderStyle CssClass="yourTasksGVHeader" />
        <Columns>
            <asp:BoundField DataField="Task Name" HeaderText="Task Name" SortExpression="TaskName" ItemStyle-Width="25%" ItemStyle-CssClass="taskTableColumn" />
            <asp:BoundField DataField="Department" HeaderText="Department" SortExpression="DepartmentName" ItemStyle-Width="25%" ItemStyle-CssClass="taskTableColumn" />
            <asp:BoundField DataField="Status" HeaderText="Status" SortExpression="TheStatus" ItemStyle-Width="15%" ItemStyle-CssClass="taskTableColumn" />
            <asp:BoundField DataField="Due Date" HeaderText="Due Date" SortExpression="DueDate" ItemStyle-Width="20%" ItemStyle-CssClass="taskTableColumn" />
            <asp:HyperLinkField Target="_blank" DataNavigateUrlFields="Link" DataTextField="Task Name" DataNavigateUrlFormatString="" HeaderText="Task Details" SortExpression="TaskDetails" ItemStyle-Width="15%" ItemStyle-CssClass="taskTableColumn" />
        </Columns>
    </asp:GridView>
</asp:Panel>

CSS：

#yourTasksGV {
    width: 100%;
    padding: 0;
    margin: 0 auto;
}
#yourTasksGV th {
    padding: 8px;
    border-bottom: 2px solid black;
    background: url(../theImages/gridHdr.png) repeat-x;
}
#yourTasksGV th a {
    text-decoration: none;
}
#yourTasksGV th a:hover {
    text-decoration: underline;
}
#yourTasksGV td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #E2E2E2;
    border-right: 1px solid #E2E2E2;
}
.yourTasksGVHeader {
    position: relative;
    top: expression(this.offsetParent.scrollTop);
    z-index: 10;
}
.taskTableColumn a {
    text-decoration: none;
}
.taskTableColumn a:hover {
    text-decoration: underline;
}
.pnlScroll {
    height: 750px;
    display: inline-block;
    overflow-y: scroll;
    overflow: scroll;

    /* IE */
    scrollbar-base-color: #A0A0A0;
    scrollbar-base-color: #A0A0A0;
    scrollbar-3dlight-color: #A0A0A0;
    scrollbar-highlight-color: #A0A0A0;
    scrollbar-track-color: #EBEBEB;
    scrollbar-arrow-color: #FFFFFF;
    scrollbar-shadow-color: #A0A0A0;
    scrollbar-darkshadow-color: #A0A0A0;
}

当我滚动时，当表格的其余部分滚动时，标题应该保持不变。但这并没有发生，因为我滚动标题时也会滚动并移出视图。

如何修改我的代码以使其正常工作？ （我在IE8上测试）

Answer 1

设置 GridView ShowHeader = "false" 并使用 HTML Table 为 GridView 创建一个单独的标题，并将 GridView 放置在 Table 下方。所以标题行总是固定在那里，我们可以滚动 GridView 并查看数据。 在你的 GridView In html 之前插入这个：

 <div style="width:478px;border:1px solid #084B8A;color:#ffffff;font-weight:bold;">
        <table bgcolor="#3090C7" rules="all" >
            <tr>
                <td style ="width:71px;">Task Name</td>
                <td style ="width:180px;" onclick="__doPostBack('ctl00$ContentMain$yourTasksGV','Sort$DepartmentName')">Department</td>
                <td style ="width:90px;">Status</td>
                <td style ="width:60px;">Due Date</td>
                <td style ="width:78px;">---</td>
            </tr>
        </table>
        </div>