ASP.NET ListView - Scrollable with fixed headers using CSS

Question

I am using an ASP.NET ListView control and, at the moment, I have a scrollable grid:

(example below is simplified and contains embedded styling for sake of question)

<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>

I'd like to apply CSS such that my headers are fixed.

What styling can I add to make it work?

Solution 1

Try http://www.imaputz.com/cssStuff/bigFourVersion.html ?

Solution 2

I just had this come up: you don't need to use CSS, just define your header row in your Layout Template as a separate table. then wrap a new table in a div with overflow=scroll and drop your contentplace holder right in.

Notice there is an extra column in the header this is to make room for the scroll bar. Then set the width of your columns the same as your headers and you are done.

You will have to include some JavaScript to keep your scroll position after postback but that's a different thread. Here is an example of how I accomplished it.

<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>