stack stack - 3 months ago 9
CSS Question

HTML is not aligning on the right side of the table

I want to copy the HTML

table
part into the Right side of the form. But when I add the
td's
it gets dealigned.

Here is my 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>


Below is the screenshot as what it looks like

HTML part

Answer

Here I have created a JSFiddle for your desired structure.
And for a better view and a valid HTML as per your requirements you need to follow DOM as:

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