表顯示問題

Question

我裏面是顯示我的兩個中繼2代嵌套表的表。我的中繼器分別顯示家庭和辦公室地址。問題在於，無論何時在一箇中繼器中添加新記錄，其他中繼器表格的顯示都會混亂。就像我在rpt1中添加記錄一樣，rpt1的表格向上移動，rpt2的表格向下移動..ie標題不會在一行中顯示。當記錄被添加或刪除時，它們會上下移動。我想要的是這些標題是固定的，所以如果我添加新記錄或刪除記錄，兩個中繼器的標題顯示在同一行上...我如何解決這個問題？希望它不會讓人困惑。

<table width="100%" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td width="50%"> 
       <asp:Panel ID="pnlAddAddress" runat="server"> 
       <asp:Repeater ID="rpt1" OnItemCommand="rpt1_ItemCommand" runat="server" OnItemDataBound="rpt1_OnItemDataBound"> 

       <HeaderTemplate>        
        <table width="99%" border="0" cellpadding="0" cellspacing="0"> 
        <tr> 
       <td colspan="5" class="linegrey"> 
         </td> 
        </tr> 
        <tr class="lgrey"> 
         <td> 
          Address1 
         </td> 

         <td> 
          City 
         </td> 
         <td> 
          State 
         </td> 

         <td> 
         IsDefault 
         </td> 
         <td> 
         Actions 
         </td> 
        </tr> 
        <tr> 
        <td colspan="5" class="dots"> 
        </tr> 
      </HeaderTemplate> 
      <ItemTemplate> 
        <tr> 
        <td> 

         <asp:LinkButton ID="lnkAddressB" runat="server" Text='<%# Eval("Address1")%>' CommandName="DisplayAddressB" CommandArgument='<%#Eval("AddID") %>' CausesValidation=false></asp:LinkButton> 

        </td> 

        <td> 
         <%# Eval("City")%> 

        </td> 
        <td> 
         <%# Eval("State")%> 
        </td> 

        <td> 

        <%-- Visible='<%# Eval("IsDefault")%>'--%> 

         <asp:LinkButton ID="lnkDefaultB" Text="Set as Default" CommandName="SetDefaultB" runat="server" CommandArgument='<%# Eval("AddID") + "," + Eval("IsB") %>' 
         CausesValidation="false" Visible='<%# Eval("IsDefault")%>'></asp:LinkButton> 
         <asp:Label ID="labelDefaultB" Text="Yes" runat="server" Visible='<%# Eval("IsDefault")%>'></asp:Label> 

        </td> 
        <td> 
        <asp:ImageButton ID="lnkAdd" CommandArgument='<%#Eval("AddID") %>' 
         CausesValidation="false" CommandName="Edit" runat="server" ImageUrl="~/images/Edit.gif" Width="14" Height="14" ToolTip="Edit"></asp:ImageButton> 
         &nbsp; 
         <asp:ImageButton ID="lnkDel" Text="Delete" CommandArgument='<%#Eval("AddID") %>' 
         CausesValidation="false" CommandName="Delete" runat="server" ImageUrl="~/images/Delete.gif" Width="14" Height="14" ToolTip="Delete"></asp:ImageButton> 
        </td> 
        </tr> 
       </ItemTemplate> 
       <FooterTemplate> 
       </table> 
       </FooterTemplate> 
       </asp:Repeater> 
      </asp:Panel> 
      </td> 
      <td> 
      <asp:Panel ID="pnlSping" runat="server"> 
       <asp:Repeater ID="rpt12" OnItemCommand="rpt12_ItemCommand" runat="server" OnItemDataBound="rptSpping_OnItemDataBound"> 
        <HeaderTemplate> 
         <table width="100%" border="0" cellpadding="0" cellspacing="0"> 
          <tr> 
           <td colspan="5" class="linegrey"> 
           </td> 
           </tr> 
           <tr class="lgrey"> 
           <td> 
            Address1 
           </td> 
           <td> 
            City 
            </td> 
            <td> 
            State 
            </td> 
            <td> 
            IsDefault 
            </td> 
            <td> 
            Actions 
            </td> 
           </tr> 
           <tr> 
            <td colspan="5" class="dots"> 
            </tr> 
         </HeaderTemplate> 
         <ItemTemplate> 
            <tr> 
            <td> 
             <asp:LinkButton ID="lnkAddressS" runat="server" Text='<%# Eval("Address1")%>' CommandArgument='<%#Eval("AddID") %>' CommandName="DisplayAddressS" CausesValidation="false"></asp:LinkButton> 
            </td> 

            <td> 
            <%# Eval("City")%> 
            </td> 
            <td> 
             <%# Eval("State")%> 
             </td> 
             <td> 
             <asp:LinkButton ID="lnkDefaultS" Text="Set as Default" CommandName="SetDefaultS" runat="server" Visible=true CommandArgument='<%# Eval("AddID") + "," + Eval("IsS") %>' 
             CausesValidation="false"></asp:LinkButton> 
             <asp:Label ID="labelDefaultS" Text="Yes" runat="server" Visible=true></asp:Label> 
             </td> 
             <td> 
             <asp:ImageButton ID="lnkAdd" Text="Edit" CommandArgument='<%#Eval("AddID") %>' 
             CausesValidation="false" CommandName="Edit" runat="server" ImageUrl="~/images/Edit.gif" Width="14" Height="14" ToolTip="Edit"></asp:ImageButton> 
             &nbsp; 
             <asp:ImageButton ID="lnkDel" Text="Delete" CommandArgument='<%#Eval("AddID") %>' 
             CausesValidation="false" CommandName="Delete" runat="server" ImageUrl="~/images/Delete.gif" Width="14" Height="14" ToolTip="Delete"></asp:ImageButton> 
             </td> 
             </tr> 
          </ItemTemplate> 
           <FooterTemplate> 
           </table> 
           </FooterTemplate> 
          </asp:Repeater> 
         </asp:Panel> 
        </td> 
       </tr> 
      </table> 

Answer 1

使用CSS屬性VALIGN並將其值設置頂部這樣<td width="50%" valign="top">。

<table width="100%" cellpadding="0" cellspacing="0"> 
      <tr> 
       <td width="50%" valign="top"> 
        <asp:Panel ID="pnlAddAddress" runat="server"> 
         ...... 
        </asp:Panel> 
       </td> 
       <td valign="top"> 
        <asp:Panel ID="pnlSping" runat="server"> 
         ...... 
        </asp:Panel> 
       </td> 
      </tr> 
     </table> 

Answer 2

對於標題看起來使用<th>元素，這將使它們保持在表的頂部。

把<table>標籤你有你的轉發控制之外，確保中繼器只呈現單個行與同爲頭。

除非你有很好的理由考慮只在包裝標籤<div>這兩個表嵌套表真的不佈局理想的工作。