我想把HTMLtable
部分复制到表单的右侧。但当我添加td's
时,它就被取消分配。
这是我的HTML
<table cellpadding="0" cellspacing="0" width="100%">
<tr style="width: 50%">
<td class="label" style="font-family: Courier New; width: 10%; text-align: left;
font-size: 120%;">
Aggregate Name:
</td>
<td class="field" style="text-align: left;">
<asp:TextBox ID="txtAggrName" runat="server" Width="20%"></asp:TextBox>
</td>
</tr>
<tr>
<td class="label" style="font-family: Courier New; width: 10%; text-align: left;
font-size: 120%;">
Confirm Party:
</td>
<td class="field" style="text-align: left;">
<asp:TextBox ID="txtConfirmParty1" runat="server" Width="20%"></asp:TextBox>
</td>
</tr>
<tr>
<td class="label" style="font-family: Courier New; width: 10%; text-align: left;
font-size: 120%;">
Agreement Amt Payable
</td>
<td class="field" style="text-align: left;">
<asp:TextBox ID="txtAgreAmtPay" runat="server" Width="20%"></asp:TextBox>
</td>
</tr>
<tr>
<td class="label" style="font-family: Courier New; width: 10%; text-align: left;
font-size: 120%;">
Land Agrregate Payable
</td>
<td class="field" style="text-align: left;">
<asp:TextBox ID="txtlandAggPay" runat="server" Width="20%"></asp:TextBox>
</td>
</tr>
<tr>
<td class="label" style="font-family: Courier New; width: 10%; text-align: left;
font-size: 120%;">
Confirm Party
</td>
<td class="field" style="text-align: left;">
<asp:TextBox ID="txtConfirmParty2" runat="server" Width="20%"></asp:TextBox>
</td>
</tr>
<tr>
<td class="label" style="font-family: Courier New; width: 10%; text-align: left;
font-size: 120%;">
Total Land Value
</td>
<td class="field" style="text-align: left;">
<asp:TextBox ID="txtLandValue" runat="server" Width="20%"></asp:TextBox>
</td>
</tr>
<tr>
<td class="label" style="font-family: Courier New; width: 10%; text-align: left;
font-size: 120%;">
Stamp Duty
</td>
<td class="field" style="text-align: left;">
<asp:TextBox ID="txtStampDuty" runat="server" Width="20%"></asp:TextBox>
</td>
</tr>
<tr>
<td class="label" style="font-family: Courier New; width: 10%; text-align: left;
font-size: 120%;">
Registration Fees
</td>
<td class="field" style="text-align: left;">
<asp:TextBox ID="txtRegisFees" runat="server" Width="20%"></asp:TextBox>
</td>
</tr>
<tr>
<td class="label" style="font-family: Courier New; width: 10%; text-align: left;
font-size: 120%;">
Legal Fees
</td>
<td class="field" style="text-align: left;">
<asp:TextBox ID="txtLegalFees" runat="server" Width="20%"></asp:TextBox>
</td>
</tr>
<tr>
<td class="label" style="font-family: Courier New; width: 10%; text-align: left;
font-size: 120%;">
Other Expenses
</td>
<td class="field" style="text-align: left;">
<asp:TextBox ID="txtOthExp" runat="server" Width="20%"></asp:TextBox>
</td>
</tr>
<tr>
<td class="label" style="font-family: Courier New; width: 10%; text-align: left;
font-size: 120%;">
Total =
</td>
<td class="field" style="text-align: left;">
<asp:TextBox ID="txtTotal" runat="server" Width="20%"></asp:TextBox>
</td>
</tr>
<tr>
<td class="label" style="font-family: Courier New; width: 10%; text-align: left;
font-size: 120%;">
Grand Total =
</td>
<td class="field" style="text-align: left;">
<asp:TextBox ID="txtGrandTotal" runat="server" Width="20%"></asp:TextBox>
</td>
</tr>
</table>
下面是屏幕截图
最佳答案
在这里,我为您所需的结构创建了一个JSFiddle。
为了根据您的要求获得更好的视图和有效的HTML,您需要遵循DOM:
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="label" style="font-family: Courier New; text-align: left;
font-size: 120%; width: 20%; ">
Aggregate Name:
</td>
<td class="field" style="text-align: left; width: 30%;">
<input type="text" style="width: 90%" />
</td>
<td class="label" style="font-family: Courier New; text-align: left;
font-size: 120%; width: 20%; ">
Aggregate Name:
</td>
<td class="field" style="text-align: left; width: 30%;">
<input type="text" style="width: 90%" />
</td>
</tr>
...