2013-08-26 28 views
1

我有以下直放站,我試圖在每行後添加一個分隔線(虛線或類似),但風格越來越亂了,我做錯了什麼?ASP.NET直放站項每行後添加分隔線

代碼:

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

通過Style得到弄亂了我的意思是隻在第一列(lblDate)和lblDate寬度擴大正在顯示的虛線所示。

回答

3

可以使用分離器模板,它裏面插入<hr />

<asp:Repeater runat="server" ID="rp"> 
<SeparatorTemplate> 
    <hr /> 
</SeparatorTemplate> 
</asp:Repeater> 
+0

全忘了小時標記。謝謝 – rikket

+0

yw Mr.rikket隨時:) –

0

因爲你的中間TR有6次達陣,添加屬性合併單元格=「6」在第一和最後一行

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

... 

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

順便說TD,你的第一個和指定不同的寬度最後的TD和兩者都小於內部TD的總和寬度,所以這些樣式不會有任何影響並且可以被移除。

0

另一種方法是在你的模板的最後吐出一個div並改變其邊框點綴。我傾向於經常使用這種方法,因爲它使我能夠輕鬆地在每個項目之間添加空間,方法是定位div並在其周圍添加空白。

因此,像這樣:

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

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

}