Question

我想弄清楚如何使用asp.net在转发器中修复标题行。当试图放置位置：固定;在tr标签中。它似乎可以修复它，但它的尺寸变小了，不能与表的其余部分一起使用。

正确方向的任何提示或帮助都会有很大帮助！

感谢

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

Answer 1

要获得固定的标题效果，您可以对代码进行两处小的更改。

1）将以下样式规则粘贴到页面的<head>部分：

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

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

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

2）将您的<div class="commands">替换为以下内容：

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

<强>输出：

在ASP.NET中修复转发器中的标题行

1 个答案: