Link to home
Start Free TrialLog in
Avatar of WCCrobert
WCCrobertFlag for United States of America

asked on

ASP Fixed Header and Footer

First time asking a question on here and relatively new to ASP, VB and CSS but I can't seem to figure out or find an answer to this problem anywhere.

I have SQL data that I am pulling into a Data Table and need it to display with a repeater with a fixed header and footer with the items being scrollable.

I've found that using 3 separate tables is probably the only way I'm going to be able to do this but when I do that, the vertical columns will not line up consistently. I have included the header on the item table to specify the column widths there instead of in the repeater item template but that introduces the problem of having a slight header and the top of the item table.

Keep in mind that the data in the item table will constantly be updated and I hope to make the columns sortable eventually.

Thanks in advance for any ideas.
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div id="contentbody">
        <div class="header"><h1>All Activity Logs</h1></div>                
            <center>
        <div id="tablecontent">
            <table width="917" border="1" cellpadding="2" cellspacing="0" class="rowdl">
                        <tr>
                            <th width="160" height="35">Name</th>
                            <th id="ex_dt" width="60">Date</th>
                            <th id="ex_name" width="200">Activity</th>
                            <th id="int_id" width="100">Intensity</th>
                            <th id="ex_time" width="95">Time</th>
                            <th id="ex_mile" width="95">Mileage</th>
                            <th id="ex_pts_per" width="95">Pts Per</th>
                            <th id="ex_tot_pts" width="112">Total Pts</th>
                        </tr>
            </table> 
            <div id="scrolllist">
                <asp:Repeater ID="Repeater1" runat="server">
                    <HeaderTemplate>
                        <table width="900" border="1" cellpadding="2" cellspacing="0" class="rowdl">
                        <tr>
                            <th width="160" height="0"></td>
                            <th id="ex_dt" width="58"></td>
                            <th id="ex_name" width="199"></td>
                            <th id="int_id" width="100"></td>
                            <th id="ex_time" width="97"></td>
                            <th id="ex_mile" width="97"></td>
                            <th id="ex_pts_per" width="96"></td>
                            <th id="ex_tot_pts" width="95"></td>
                        </tr>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <tr>
                            <td height="20" class="rowdl"><%#Container.DataItem("full_name")%>&nbsp;</td>
                            <td class="rowdr"><%#NullDate(Container.DataItem("ex_dt"))%></td>
                            <td class="rowdl">&nbsp;<%#NullString(Container.DataItem("ex_name"))%></td>
                            <td class="rowdl">&nbsp;<%#NullString(Container.DataItem("int_id"))%></td>
                            <td class="rowdr"><%#NullString(Container.DataItem("ex_time"))%>&nbsp;</td>
                            <td class="rowdr"><%#NullNumber(Container.DataItem("ex_mile"), "#,#0.00; (#,#0.00); #,#0.00", "0.0")%>&nbsp;</td>
                            <td class="rowdr"><%#NullNumber(Container.DataItem("ex_pts_per"), "#,#0.0; (#,#0.0); #,#0.0", "0.0")%>&nbsp;</td>
                            <td class="rowdr"><%#NullNumber(Container.DataItem("ex_tot_pts"), "#,#0.0; (#,#0.0); #,#0.0", "0.0")%>&nbsp;</td>
                        </tr>
                    </ItemTemplate>
                    <FooterTemplate>
                    </table>
                    </FooterTemplate>                    
                </asp:Repeater>
            </div>
            <table width="917" border="1" cellpadding="2" cellspacing="0" class="rowdl">
                <tr>
                    <td width="160" height="20" class="blankbg"></td>
                    <td class="blankbg" width="60"></td>
                    <td class="blankbg" width="200"></td>
                    <td class="blankbg" width="100"></td>
                    <td class="rowdr" width="95">AVG Time</td>
                    <td class="rowdr" width="95">Mileage</td>
                    <td class="rowdr" width="95">Pts Per</td>
                    <td class="rowdr" width="112">Total Points&nbsp;&nbsp;&nbsp;&nbsp;</td>
                </tr>
            </table>   
        </div>
            </center>
</div>
</asp:Content>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Jens Fiederer
Jens Fiederer
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of WCCrobert

ASKER

Solution was not entirely specific to my problem but guided me to finding the solution.