需要与td的边界对齐

时间：2016-08-23 09:18:39

标签： html css

我有一个Html，我希望border与td's对齐，如下图所示

TD over image

我试过但它没有来。

下面是html 

<table bgcolor="#EAEFF5" cellpadding="3" cellspacing="3" width="100%">
    <tr>
        <td style="vertical-align: top;">
            <table bgcolor="#EAEFF5" cellpadding="3" cellspacing="3" width="100%">
                <tr>
                    <td style="font-family: Courier New; text-align: left; font-size: 120%; width: 60%;">
                        Aggregate Name:
                    </td>
                    <td class="field2" style="text-align: left;">
                        <asp:TextBox ID="txtAggrName" runat="server" Width="95%"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td style="font-family: Courier New; text-align: left; font-size: 120%; width: 60%;">
                        Confirming Party:
                    </td>
                    <td class="field2" style="text-align: left;">
                        <asp:TextBox ID="txtConfirmParty" runat="server" Width="95%"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <tr>
                        <td style="font-family: Courier New; text-align: left; font-size: 120%; width: 60%;">
                            Agreement Amt Payable:
                        </td>
                        <td class="field2" style="text-align: left;">
                            <asp:TextBox ID="txtAgreePay" runat="server" Width="95%"></asp:TextBox>
                        </td>
                    </tr>
                    <td style="font-family: Courier New; text-align: left; font-size: 120%; width: 70%;">
                        Land Aggregate Payable:
                    </td>
                    <td class="field2" style="text-align: left;">
                        <asp:TextBox ID="txtLandPay" runat="server" Width="95%"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td style="font-family: Courier New; text-align: left; font-size: 120%; width: 60%;">
                        Confirming Party:
                    </td>
                    <td style="text-align: left;">
                        <asp:TextBox ID="TextBox1" runat="server" Width="95%"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td style="font-family: Courier New; text-align: left; font-size: 120%; width: 60%;">
                        Total Land Value:
                    </td>
                    <td class="field2" style="text-align: left;">
                        <asp:TextBox ID="txtTotLandValue" runat="server" Width="95%"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td style="font-family: Courier New; text-align: left; font-size: 120%; width: 60%;">
                        Stamp Duty:
                    </td>
                    <td class="field2" style="text-align: left;">
                        <asp:TextBox ID="txtStampDuty" runat="server" Width="95%"></asp:TextBox>
                    </td>
                    <td style="font-family: Courier New; text-align: left; font-size: 120%; width: 60%;">
                    </td>
                    <td class="field2" style="text-align: left;">
                    </td>
                </tr>
                <tr>
                    <td class="label2" style="font-family: Courier New; text-align: left; font-size: 120%;">
                        Registration Fees:
                    </td>
                    <td class="field" style="text-align: left;">
                        <asp:TextBox ID="txtRegFees" runat="server" Width="95%"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td class="label2" style="font-family: Courier New; text-align: left; font-size: 120%;">
                        Legal Fees:
                    </td>
                    <td class="field2" style="text-align: left;">
                        <asp:TextBox ID="txtLegFees" runat="server" Width="95%"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td class="label2" style="font-family: Courier New; text-align: left; font-size: 120%;">
                        Other Expenses:
                    </td>
                    <td class="field2" style="text-align: left;">
                        <asp:TextBox ID="txtOthExp" runat="server" Width="95%"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td class="label2" style="font-family: Courier New; text-align: left; font-size: 120%;">
                        Total:
                    </td>
                    <td class="field2" style="text-align: left;">
                        <asp:TextBox ID="txtTotal" runat="server" Width="95%"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td class="label2" style="font-family: Courier New; text-align: left; font-size: 120%;">
                        Grand Total:
                    </td>
                    <td class="field2" style="text-align: left;">
                        <asp:TextBox ID="txtGrandTotal" runat="server" Width="95%"></asp:TextBox>
                    </td>
                </tr>
            </table>
        </td>
        <td style="vertical-align: top;">
            <table bgcolor="#EAEFF5" cellpadding="3" cellspacing="3" width="100%">
                <tr>
                    <td class="label2" style="font-family: Courier New; text-align: left; font-size: 120%;">
                        Registration Date:
                    </td>
                    <td class="field2" style="text-align: left;">
                        <input type="text1" style="width: 60%" />
                    </td>
                </tr>
                <tr>
                    <td class="label2" style="font-family: Courier New; text-align: left; font-size: 120%;">
                        Registration No:
                    </td>
                    <td class="field2" style="text-align: left;">
                        <input type="text" style="width: 60%" />
                    </td>
                </tr>
                <tr>
                    <td class="label2" style="font-family: Courier New; text-align: left; font-size: 120%;">
                        POA No:
                    </td>
                    <td class="field2" style="text-align: left;">
                        <input type="text" style="width: 60%" />
                    </td>
                </tr>
                <tr>
                    <td class="label2" style="font-family: Courier New; text-align: left; font-size: 120%;">
                        POA Holder:
                    </td>
                    <td class="field2" style="text-align: left;">
                        <input type="text" style="width: 60%" />
                    </td>
                </tr>
                <tr>
                    <td class="label2" style="font-family: Courier New; text-align: left; font-size: 120%;">
                        Conveyance Deed Regist No:
                    </td>
                    <td class="field2" style="text-align: left;">
                        <input type="text" style="width: 60%" />
                    </td>
                </tr>
                <tr>
                    <td class="label2" style="font-family: Courier New; text-align: left; font-size: 120%;">
                        Conveyance Deed Regist Date:
                    </td>
                    <td class="field2" style="text-align: left;">
                        <input type="text" style="width: 60%" />
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

让我知道如何获得

2 个答案:

答案 0 :(得分：2)

您需要在td中创建内联表，然后才能对其应用边框。

.red-border {
  border: 1px solid red;
}
<table bgcolor="#EAEFF5" cellpadding="3" cellspacing="3" width="100%">
  <tr>
    <td style="vertical-align: top;">
      <table bgcolor="#EAEFF5" cellpadding="3" cellspacing="3" width="100%">
        <tr>
          <td style="font-family: Courier New; text-align: left; font-size: 120%; width: 60%;">
            Aggregate Name:
          </td>
          <td class="field2" style="text-align: left;">
            <asp:TextBox ID="txtAggrName" runat="server" Width="95%"></asp:TextBox>
          </td>
        </tr>
        <tr>
          <td style="font-family: Courier New; text-align: left; font-size: 120%; width: 60%;">
            Confirming Party:
          </td>
          <td class="field2" style="text-align: left;">
            <asp:TextBox ID="txtConfirmParty" runat="server" Width="95%"></asp:TextBox>
          </td>
        </tr>
        <tr>
          <td colspan="2" class="red-border"><!-- add table in this td -->
            <table width="100%">
              <tr>
                <td style="font-family: Courier New; text-align: left; font-size: 120%; width: 60%;">
                  Agreement Amt Payable:
                </td>
                <td class="field2" style="text-align: left;">
                  <input ID="txtAgreePay" Width="95%">
                </td>
              </tr>
              <tr>
                <td style="font-family: Courier New; text-align: left; font-size: 120%; width: 70%;">
                  Land Aggregate Payable:
                </td>
                <td class="field2" style="text-align: left;">
                  <input ID="txtLandPay" Width="95%">
                </td>
              </tr>
              <tr>
                <td style="font-family: Courier New; text-align: left; font-size: 120%; width: 60%;">
                  Confirming Party:
                </td>
                <td style="text-align: left;">
                  <input ID="TextBox1" Width="95%">
                </td>
              </tr>
              <tr>
                <td style="font-family: Courier New; text-align: left; font-size: 120%; width: 60%;">
                  Total Land Value:
                </td>
                <td class="field2" style="text-align: left;">
                  <input ID="txtTotLandValue" Width="95%">
                </td>
              </tr>
            </table>
          </td>
        </tr>

        <tr>
          <td style="font-family: Courier New; text-align: left; font-size: 120%; width: 60%;">
            Stamp Duty:
          </td>
          <td class="field2" style="text-align: left;">
            <asp:TextBox ID="txtStampDuty" runat="server" Width="95%"></asp:TextBox>
          </td>
          <td style="font-family: Courier New; text-align: left; font-size: 120%; width: 60%;">
          </td>
          <td class="field2" style="text-align: left;">
          </td>
        </tr>
        <tr>
          <td class="label2" style="font-family: Courier New; text-align: left; font-size: 120%;">
            Registration Fees:
          </td>
          <td class="field" style="text-align: left;">
            <asp:TextBox ID="txtRegFees" runat="server" Width="95%"></asp:TextBox>
          </td>
        </tr>
        <tr>
          <td class="label2" style="font-family: Courier New; text-align: left; font-size: 120%;">
            Legal Fees:
          </td>
          <td class="field2" style="text-align: left;">
            <asp:TextBox ID="txtLegFees" runat="server" Width="95%"></asp:TextBox>
          </td>
        </tr>
        <tr>
          <td class="label2" style="font-family: Courier New; text-align: left; font-size: 120%;">
            Other Expenses:
          </td>
          <td class="field2" style="text-align: left;">
            <asp:TextBox ID="txtOthExp" runat="server" Width="95%"></asp:TextBox>
          </td>
        </tr>
        <tr>
          <td class="label2" style="font-family: Courier New; text-align: left; font-size: 120%;">
            Total:
          </td>
          <td class="field2" style="text-align: left;">
            <asp:TextBox ID="txtTotal" runat="server" Width="95%"></asp:TextBox>
          </td>
        </tr>
        <tr>
          <td class="label2" style="font-family: Courier New; text-align: left; font-size: 120%;">
            Grand Total:
          </td>
          <td class="field2" style="text-align: left;">
            <asp:TextBox ID="txtGrandTotal" runat="server" Width="95%"></asp:TextBox>
          </td>
        </tr>
      </table>
    </td>
    <td style="vertical-align: top;">
      <table bgcolor="#EAEFF5" cellpadding="3" cellspacing="3" width="100%">
        <tr>
          <td class="label2" style="font-family: Courier New; text-align: left; font-size: 120%;">
            Registration Date:
          </td>
          <td class="field2" style="text-align: left;">
            <input type="text1" style="width: 60%" />
          </td>
        </tr>
        <tr>
          <td class="label2" style="font-family: Courier New; text-align: left; font-size: 120%;">
            Registration No:
          </td>
          <td class="field2" style="text-align: left;">
            <input type="text" style="width: 60%" />
          </td>
        </tr>
        <tr>
          <td class="label2" style="font-family: Courier New; text-align: left; font-size: 120%;">
            POA No:
          </td>
          <td class="field2" style="text-align: left;">
            <input type="text" style="width: 60%" />
          </td>
        </tr>
        <tr>
          <td class="label2" style="font-family: Courier New; text-align: left; font-size: 120%;">
            POA Holder:
          </td>
          <td class="field2" style="text-align: left;">
            <input type="text" style="width: 60%" />
          </td>
        </tr>
        <tr>
          <td class="label2" style="font-family: Courier New; text-align: left; font-size: 120%;">
            Conveyance Deed Regist No:
          </td>
          <td class="field2" style="text-align: left;">
            <input type="text" style="width: 60%" />
          </td>
        </tr>
        <tr>
          <td class="label2" style="font-family: Courier New; text-align: left; font-size: 120%;">
            Conveyance Deed Regist Date:
          </td>
          <td class="field2" style="text-align: left;">
            <input type="text" style="width: 60%" />
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

答案 1 :(得分：1)

在td class属性

中的所需列中使用这些css样式 
table {
  border-collapse: collapse;
}

.borderlft {
  border-left: 1px solid #ff0000;
}

.borderrht {
  border-right: 1px solid #ff0000;
}

.bordertop {
  border-top: 1px solid #ff0000;
}

.borderbtm {
  border-bottom: 1px solid #ff0000;
}
相关问题
最新问题