HTML没有在表的右侧对齐

时间:2016-08-22 09:10:02

标签: html css html-table

我想将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>

下面是截图

HTML part

2 个答案:

答案 0 :(得分:3)

在这里,我为您想要的结构创建了一个JSFiddle
根据您的要求,为了获得更好的视图和有效的 HTML ,您需要遵循 DOM

bind

答案 1 :(得分:0)

将整个表格放入带ID的div中,并将其宽度调整为50%,然后通过CSS标记将div移动到右侧: 这是一个例子:

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