Table display issue
I got a table with 2 nested tables inside that display my two repeaters. My repeaters display Home and office addresses respectively. The problem is that whenever I add a new record in one repeater, the other repeater table's display gets messed up. Like if I add a record in rpt1 , then table for rpt1 moves up and table for rpt2 goes down..ie the headers do not display in one single line . They move up and down when records are added or deleted. WHat I want is these headers to be fixed so if I add new records or delete records, the headings of both repeaters display on the same line...How do I fix this ? Hope its not confusing.
<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>
<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>
<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>
Use css attribute valign and set its value to top like this <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>
For headers look to use the <th>
element, this will keep them at the top of the table.
Put the <table>
tags you do have outside your repeater controls, make sure the repeater only renders a single row and the same for the header.
Unless you have good reason consider just wrapping the two tables in <div>
tags as nested tables really don't work ideally for layout.
精彩评论