CODEWITHSUNDEEP
htmlasp.net
D B
D B

Reputation: 306

Fix header row in repeater in ASP.NET

i am trying to figure out how to fix the header row with in the repeater using asp.net. When trying to put position:fixed; in the tr tag. It seems to fix it but it becomes smaller in size and doesn't work with the rest of the table.

any hints or help in the right direction would help significantly!

thanks

<div class="form-panel" style="font-size: small; text-align: left;">
    <div class="header">
        <div class="contentRestriction" style="height: 22px">
            Action Bulletin Exception
            <asp:button id="addException" text="Add Exception" runat="server" style="float: right; margin-right: 20px" onclick="addExceptions" />
        </div>
    </div>
    <div class="commands">
        <div class="contentRestriction" style="overflow-y: scroll; width: 100%; height: 185px">
            <asp:repeater id="repException" runat="server" datasourceid="SP_AB_BULLETIN_EXCEPTION">
                        <HeaderTemplate>
                            <div class="form-panel" style="font-size: small;">
                                <table class="notepad-table" cellpadding="2" cellspacing="0" width="100%" >
                                    <tr style="background-color: #eeeeee; font-weight: bold; ">                                 
                                        <td>Date Time From</td>
                                        <td>Date Time To</td>
                                        <td>Status</td>
                                        <td>Last Modified</td>
                                        <td>Last Modified By</td>
                                        <td>Action</td>
                                    </tr>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <tr id="tr1" runat="server">
                                <td>
                                    <asp:Literal ID="Literal1" runat="server" Text='<%# Eval("EFTV_FROM") %>' />
                                </td>
                                <td>
                                    <asp:Literal ID="Literal2" runat="server" Text='<%# Eval("EFTV_TO") %>' />
                                </td>
                                <td>
                                    <asp:Literal ID="Literal3" runat="server" Text='<%# Eval("AB_STATUS1") %>' />
                                </td>
                                <td>
                                    <asp:Literal ID="Literal4" runat="server" Text='<%# Eval("LAST_MOD_DATE") %>' />
                                </td>
                                <td>
                                    <asp:Literal ID="Literal6" runat="server" Text='<%# Eval("UserName") %>' />
                                </td>
                                <td>
                                    <asp:Button ID="editException" Text="Edit" runat="server"  CommandName="EXID" CommandArgument='<%# Eval("EX_ID") %>' OnCommand="editException" />
                                    <asp:Button ID="deleteException" Text="Delete" runat="server" CommandName="EXID" CommandArgument='<%# Eval("EX_ID") %>' OnCommand="deleteException" />
                                </td>

                            </tr>
                        </ItemTemplate>
                        <FooterTemplate>
            </table> 
        </div>
        </FooterTemplate>
                    </asp:Repeater>      
    </div>
</div>
</div>

Upvotes: 1

Views: 5031

Answers (1)

Denys Wessels
Denys Wessels

Reputation: 17049

To get the fixed header effect you can make two small changes to your code.

1) Paste the following style rules in the <head> section of your page:

<style type="text/css">
    table tbody, table thead {
        display: block;
    }

    table tbody {
        overflow: auto;
        height: 100px;
    }

    th, td {
        width: 150px;
    }
</style>

2) Replace your <div class="commands"> with the one below:

 <div class="commands">
                <asp:Repeater ID="repException" runat="server" DataSourceID="SP_AB_BULLETIN_EXCEPTION">
                    <HeaderTemplate>
                        <div class="form-panel" style="font-size: small;">
                            <table class="notepad-table" cellpadding="2" cellspacing="0">
                                <thead>
                                    <tr style="background-color: #eeeeee; font-weight: bold;">
                                        <th>Date Time From</th>
                                        <th>Date Time To</th>
                                        <th>Status</th>
                                        <th>Last Modified</th>
                                        <th>Last Modified By</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <tr id="tr1" runat="server">
                            <td>
                                <asp:Literal ID="Literal1" runat="server" Text='<%# Eval("EFTV_FROM") %>' />
                            </td>
                            <td>
                                <asp:Literal ID="Literal2" runat="server" Text='<%# Eval("EFTV_TO") %>' />
                            </td>
                            <td>
                                <asp:Literal ID="Literal3" runat="server" Text='<%# Eval("AB_STATUS1") %>' />
                            </td>
                            <td>
                                <asp:Literal ID="Literal4" runat="server" Text='<%# Eval("LAST_MOD_DATE") %>' />
                            </td>
                            <td>
                                <asp:Literal ID="Literal6" runat="server" Text='<%# Eval("UserName") %>' />
                            </td>
                            <td>
                                <asp:Button ID="editException" Text="Edit" runat="server" CommandName="EXID" CommandArgument='<%# Eval("EX_ID") %>' OnCommand="editException" />
                                <asp:Button ID="deleteException" Text="Delete" runat="server" CommandName="EXID" CommandArgument='<%# Eval("EX_ID") %>' OnCommand="deleteException" />
                            </td>

                        </tr>
                    </ItemTemplate>
                    <FooterTemplate>
                        </tbody>
                            </table> 
                            </div>
                    </FooterTemplate>
                </asp:Repeater>
            </div>

Output:

HTML table with fixed headers

Upvotes: 2

Related Questions