ASP.NET Repeater项在每行后面添加分隔符
本文关键字:添加 分隔符 NET Repeater ASP | 更新日期: 2023-09-27 18:29:00
我有下面的Repeater,我试图在每行后面添加一个分隔符(虚线或类似的),但样式变得一团糟,我做错了什么?
代码:
<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
的宽度被扩展。
您可以使用分隔符模板,并在其中插入<hr />
<asp:Repeater runat="server" ID="rp">
<SeparatorTemplate>
<hr />
</SeparatorTemplate>
</asp:Repeater>
由于中间TR有6个TD,请在的第一行和最后一行的TD中添加属性colspan="6"
<td colspan="6" style="width:400px;">
...
<td colspan="6" style="width:900px;">
顺便说一句,您为第一个和最后一个TD指定了不同的宽度,并且两者都小于内部TD的汇总宽度,因此这些样式不会有任何影响,可以删除。
另一种方法是在模板的最后吐出一个div,并将其边框更改为虚线。我倾向于经常安静地使用这种方法,因为它使我能够通过瞄准div并在其周围添加边距来轻松地在每个项目之间添加空间
这样的东西:
<ItemTemplate>
...
<div class="divider"></div>
</ItemTemplate>
.divider
{
border: 1px dotted #C5C5C5;
height: 5px;
margin-bottom: 15px;
width: 100%;
}
使用css flex 的另一种方法
<div style="display: flex; align-items: center">
<div>My awesome article price:</div>
<div style="flex:1;border-bottom: dotted 1px #eee"></div>
<div>10.00€</div>
</div>