Dropdown is not in theri position in html - html

Question

i try to add dropdown in repeater it shows me drodown above in table where as i want to show in status column
code in html
<div class="CSSTableGenerator">
<table border="0" width="100%" cellpadding="0"
cellspacing="0" id="results">
<asp:Repeater ID="Repeater2" OnItemCommand="Repeater2_ItemCommand" runat="server">
<HeaderTemplate>
<tr>
<td>
DocumentID
</td>
<td>
DocName
</td>
<td>
File Name
</td>
<td>
Document
</td>
<td>
Department
</td>
<td>
Status
</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:Label Id="DocId" runat="server"></asp:Label>
<%#DataBinder.Eval(Container.DataItem, "DocID")%>
</td>
<td>
<asp:Label Id="DocName" runat="server"></asp:Label>
<%#DataBinder.Eval(Container.DataItem, "DocName")%>
</td>
<td>
<asp:Label Id="Uploadfile" runat="server"></asp:Label>
<%#DataBinder.Eval(Container.DataItem, "Uploadfile")%>
</td>
<td>
<asp:Label Id="DocType" runat="server"></asp:Label>
<%#DataBinder.Eval(Container.DataItem, "DocType")%>
</td>
<td>
<asp:Label Id="DepType" runat="server"></asp:Label>
<%#DataBinder.Eval(Container.DataItem, "DepType")%>
</td>
<td>
<asp:Label ID="Label1" runat="server"
Text='<%# Eval("ApproveID") %>' Visible = "false" />
<%#DataBinder.Eval(Container.DataItem, "ApproveID")%>
</td>
</tr>
<asp:Label ID="lblCountry" runat="server"
Text='<%# Eval("ApproveID") %>' Visible = "false" />
<asp:DropDownList ID="DropDownList4" runat="server"
EnableViewState="true" class="vpb_dropdown"
DataTextField="ApproveType"
DataValueField="ApproveID" AutoPostBack="true"
OnSelectedIndexChanged="DropDownList4_SelectedIndexChanged">
<asp:ListItem Text="Pending" selected="selected"
Value="3"></asp:ListItem>
<asp:ListItem Text="Approve"
Value="1"></asp:ListItem>
<asp:ListItem Text="Reject"
Value="2"></asp:ListItem>
</asp:DropDownList>
</ItemTemplate>
</asp:Repeater>
</table>
<asp:Label ID="apfi" runat="server" Text="Label"></asp:Label><br />
<asp:Button ID="Button4" runat="server" Text="Button" onclick="Button4_Click" />
</div>
</div>
</center>
</div>
pleae have a look image below how i solve this ...where is mistake?
but it shows me like this
image

Answer 1

The mistake is that your DropDownList (and a Label) are between the table and tr elements, which is invalid HTML. The result client-side would be something like this:
<table>
<tr>
<td>...</td>
</tr>
<span>...</span>
<select>
<option>...</option>
</select>
</table>
There's no way to correctly render that because span and select aren't table row elements.
As for how to fix this, that entirely depends on how you want those elements to display. What you've attempted isn't a meaningful layout, so what is the layout you're looking for?
For example, if you want those elements to display in a table cell at the end of the row, you need to add a cell for them:
<table>
<tr>
<td>...</td>
<td>
<span>...</span>
<select>
<option>...</option>
</select>
</td>
</tr>
</table>
If you want them to display outside the table (maybe to the right of it?) then they'd need to be outside the table and you can use CSS to position them. (Alignment would be tricky, though. If they're logically part of the table, which they seem to be given that they're in its repeater, then they should be part of the table itself.)
Table structures have to be structured like a table.
(Note: Any time you have rendering issues like this, the first thing you should do is validate your markup. That would have identified specifically which parts are invalid and referenced the HTML specifications which define those parts.)