ASP.NET ListView - 使用 CSS 可滚动固定标题答案

【问题标题】：ASP.NET ListView - Scrollable with fixed headers using CSSASP.NET ListView - 使用 CSS 可滚动固定标题
【发布时间】：2011-02-22 00:31:51
【问题描述】：

我正在使用 ASP.NET ListView 控件，目前我有一个可滚动的网格：

（下面的示例被简化并包含嵌入式样式）

<asp:ListView ID="ListView" runat="server" DataKeyNames="Id">
        <LayoutTemplate>
            <div style="height:225px; overflow:auto;">
                <table runat="server">
                    <tr>
                        <th>
                            <span>Column1</span>
                        </th>
                        <th>
                            <span>Column2</span>
                        </th>
                        <th>
                            <span>Column3</span>
                        </th>
                    </tr>
                    <tr id="itemPlaceholder" runat="server" />
                </table>
            </div>
        </LayoutTemplate>
        <ItemTemplate>
            <tr id="items" runat="server">
                <td class="first">
                    <%#Eval("Column1")%>
                </td>
                <td>
                    <%#Eval("Column2")%>
                </td>
                <td>
                    <%#Eval("Column3")%>
                </td>
            </tr>
        </ItemTemplate>
    </asp:ListView>

我想应用 CSS 来固定我的标题。

我可以添加什么样式以使其正常工作？

【问题讨论】：

相对宽度怎么样？大多数人使用相对宽度。你能发布像Container.ColumnWidth这样的东西吗？我知道这可能不存在，但需要把它放在那里

标签： .net asp.net html css web-applications

【解决方案1】：

试试http://www.imaputz.com/cssStuff/bigFourVersion.html？

【讨论】：

我认为这是一个非常干净的解决方案，但不幸的是，ListView 控件忽略了 THEAD 和 TBODY 标记。我发问题时没有想到这一点。
此示例是否提供任何帮助：codeproject.com/KB/webforms/CompleteListView.aspx ?
对不起，我的立场是正确的：stackoverflow.com/questions/2877898/… 这有效。

【解决方案2】：

我刚刚想到了这个：您不需要使用 CSS，只需将布局模板中的标题行定义为单独的表格。然后用 overflow=scroll 在 div 中包装一个新表格，然后将你的 contentplace 持有者直接放入。

请注意，标题中有一个额外的列，这是为滚动条腾出空间。然后将列的宽度设置为与标题相同，就完成了。

您必须包含一些 JavaScript 以在回发后保持滚动位置，但这是一个不同的线程。这是我如何完成它的示例。

<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1">                       
        <EmptyDataTemplate>
            <table id="Table1" runat="server" 
                style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;">
                <tr>
                    <td>
                        No data was returned.</td>
                </tr>
            </table>
        </EmptyDataTemplate>            
        <ItemTemplate>
            <tr style="background-color: #E0FFFF;color: #333333;">
                <td style="width:100px;">
                    <asp:LinkButton ID="Butpullacct" OnClick="Butpullacct_Click" runat="server">Reaccess</asp:LinkButton>
                </td>
                <td style="display:none">
                    <asp:Label ID="idLabel" runat="server" Text='<%# Eval("id") %>' />
                </td>
                <td style="width:100px;">
                    <asp:Label ID="BTNRSLabel" runat="server" Text='<%# Eval("BTNRS") %>' />
                </td>
                <td style="width:100px;">
                    <asp:Label ID="NoticeDueLabel" runat="server" 
                        Text='<%# Eval("NoticeDue")%>' />
                </td>
                <td style="width:75px;">
                    <asp:Label ID="NoticeTypeLabel" runat="server" 
                        Text='<%# Eval("NoticeType") %>' />
                </td>
                <td style="width:200px;">
                    <asp:Label ID="DispDescLabel" runat="server" Text='<%# Eval("DispDesc") %>' />
                </td>
                <td style="width:175px;">
                    <asp:Label ID="AccessTimeLabel" runat="server" 
                        Text='<%# Eval("AccessTime") %>' />
                </td>
                <td style="width:175px;">
                    <asp:Label ID="ExitTimeLabel" runat="server" Text='<%# Eval("ExitTime") %>' />
                </td>
            </tr>
        </ItemTemplate>
        <LayoutTemplate>
            <table id="Table2" runat="server">
                <tr id="Tr1" runat="server">
                    <td id="Td1" runat="server">
                        <table ID="itemPlaceholderContainer" runat="server" border="1" 
                            style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;font-family: Verdana, Arial, Helvetica, sans-serif;">
                            <tr id="Tr2" runat="server" style="background-color: #E0FFFF;color: #333333;">
                                <th id="Th1" runat="server" style="width:100px;"></th>
                                <th id="Th2" runat="server" style="display:none">
                                    id</th>
                                <th id="Th3" runat="server" style="width:100px;">
                                    BTNRS</th>
                                <th id="Th4" runat="server" style="width:100px;">
                                    Notice Due Date</th>
                                <th id="Th5" runat="server" style="width:75px;">
                                    Notice Type</th>
                                <th id="Th6" runat="server" style="width:200px;">
                                    Action</th>
                                <th id="Th7" runat="server" style="width:175px;">
                                    Access Time</th>
                                <th id="Th8" runat="server" style="width:175px;">
                                    Exit Time</th>
                                <th id="Th9" style="width:13px;" runat="server">
                                    </th>
                            </tr>                       
                        </table>
                        <div style="overflow:scroll; height:500px;">
                            <table border="1" style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;font-family: Verdana, Arial, Helvetica, sans-serif;">
                                <tr ID="itemPlaceholder" runat="server">
                                </tr>
                            </table>                            
                        </div>
                    </td>
                </tr>
                <tr id="Tr3" runat="server">
                    <td id="Td2" runat="server" 
                        style="text-align: center;background-color: #5D7B9D;font-family: Verdana, Arial, Helvetica, sans-serif;color: #FFFFFF">
                    </td>
                </tr>
            </table>
        </LayoutTemplate>          
    </asp:ListView>

【讨论】：

使用此解决方案您会失去自动宽度！