HTML在表格的右側未對齊

Question

我想將HTML table部分復制到表單的右側。 但是，當我添加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>

下面是它的截圖

Answer 1

在這里，我為您所需的結構創建了一個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>
   ...

Answer 2

將整個表格放入ID為div的表格中，並將其寬度調整為50％，然后通過CSS標記將div移至右側：例如：

    table-right{
width: 500px;
margin-left: 400px;
}