ASP.NET ListView - прокрутка с фиксированными заголовками с использованием CSS

Question

Я использую элемент управления 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 так, чтобы мои заголовки были фиксированными.

Какой стиль можно добавить, чтобы он работал?

Answer 1

Попробуйте http://www.imaputz.com/cssStuff/bigFourVersion.html?

Answer 2

У меня только что получилось: вам не нужно использовать CSS, просто определите строку заголовка в шаблоне макета как отдельную таблицу.затем оберните новую таблицу в div с помощью overflow=scroll и поместите в нее владельца содержимого.

Обратите внимание, что в заголовке есть дополнительный столбец, чтобы освободить место для полосы прокрутки.Затем установите ширину ваших столбцов так же, как ваши заголовки, и все готово.

Вы должны будете включить немного 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>