1

我有以下中继器，我试图在每行之后添加一个分隔线（虚线或类似的），但样式变得混乱，我做错了什么？

代码：

<ItemTemplate>
<table id="tableItem" runat="server">
<tr>
<td style="width:400px;">
          <%--   <asp:Label ID="lblEmployeeId" runat="server" Text='<%#Eval("EmployeeId") %>' ></asp:Label>--%>
            <asp:HiddenField ID="HdnEmployeeId" runat="server" Value='<%#Eval("EmployeeId") %>' />
            <asp:Literal Text="" runat="server" ID="LiteralUser" ></asp:Literal>
</td>
</tr>
    <tr>
            <td style="width: 100px;">
                <asp:HiddenField ID="HdnRequestId" runat="server" Value='<%#Eval("id") %>' />
                <asp:Label ID="lblDate" runat="server" Text='<%#Eval("Date", "{0:dd/M/yyyy}") %>'></asp:Label>
            </td>
            <td style="width: 80px;">
                <asp:Label ID="lblHours" runat="server" Text='<%#Eval("Hours") %>'></asp:Label>
            </td>
            <td style="width: 50px; font-size:10px;">
                <asp:Label ID="lblPeriod" runat="server" Text='<%#Eval("AMorPM") %>'></asp:Label>
            </td>
            <td style="width: 850px; font-size:10px;">
                <asp:Label ID="lblNote" runat="server" Text='<%#Eval("Note") %>'></asp:Label>
            </td>
            <td style="50px">
                <asp:RadioButtonList ID="rbtVerified" runat="server" >
                    <asp:ListItem Value="1">Accept</asp:ListItem>
                    <asp:ListItem Value="2">Reject</asp:ListItem>
                </asp:RadioButtonList>
            </td>
            <td>
                <asp:TextBox ID="txtNotes" runat="server" ></asp:TextBox>
            </td>
        </tr>
        <tr>
        <td style="width:900px;">
        <asp:Label ID="lblBreak" runat="server" Text="------------------------------------------------------------------------------"></asp:Label>
        </td>
        </tr>
</table>

通过样式变得混乱，我的意思是虚线仅显示在第一列 ( lblDate) 下并且lblDate宽度被扩展。

4

3 回答 3

3

您可以使用分隔符模板并在其中插入<hr />

<asp:Repeater runat="server" ID="rp">
<SeparatorTemplate>
    <hr />
</SeparatorTemplate>
</asp:Repeater>
于 2013-08-26T14:25:13.423 回答
0

由于您的中间 TR 有 6 个 TD，因此在第一行和最后一行将属性 colspan="6" 添加到 TD

<td colspan="6" style="width:400px;">

 ...

<td colspan="6" style="width:900px;">

顺便说一句，您为第一个和最后一个 TD 指定了不同的宽度，并且两者都小于内部 TD 的摘要宽度，因此这些样式不会有任何影响并且可以删除。

于 2013-08-26T14:09:07.233 回答
0

另一种方法是在模板的最后吐出一个 div 并将其边框更改为 dotted。我倾向于经常安静地使用这种方法，因为它使我能够通过定位 div 并在其周围添加边距来轻松地在每个项目之间添加空间。

所以是这样的：

<ItemTemplate>
    ...
    <div class="divider"></div>
</ItemTemplate>

.divider
{
   border: 1px dotted #C5C5C5;
   height: 5px;
   margin-bottom: 15px;
   width: 100%;

}
于 2013-08-26T19:20:06.753 回答