html - 将一个表与另一个表的第二列对齐

Question

我想对齐第二个<table>在<div> .该表应从第一个表的第二列开始。现在，带有文本“1111111111111”的第二个表格从最左边开始，但我希望将它与第一个表格中文本框的起始位置对齐。

这是我的 HTML:

<div style="float: left; height: 250px;overflow:auto; display:block;margin-left: 10px">
  <table border="1">
    <tr>
      <td style="padding-left: 10px; font-size: 24px;text-align: center" colspan="2">Title</td>
    </tr>
    <tr>
      <td style="padding-top: 10px;">
        <asp:Label runat="server">First Name</asp:Label>
      </td>
      <td style="padding-top: 10px;padding-left: 10px">
        <input type="text" />
      </td>
    </tr>
    <tr>
      <td style="padding-top: 10px;">
        <asp:Label runat="server">Email</asp:Label>
      </td>
      <td style="padding-top: 10px;padding-left: 10px">
        <input type="text" />
      </td>
    </tr>
    <tr>
      <td style="padding-top: 45px;"></td>
      <td style="text-align: center"></td>
    </tr>
  </table>
  <table border="1">
    <tr>
      <td style="padding-top: 20px; word-wrap: break-word;text-align: center">1111111111111</td>
    </tr>
  </table>
</div>

Answer 1

使用 :nth-child(2)

将第二个表的 margin-left 值设置为 33%

table:nth-child(2) {
  margin-left: 33%;
}

<div style="float: left; height: 250px;overflow:auto; display:block;margin-left: 10px">
  <table border="1">
    <tr>
      <td style="padding-left: 10px; font-size: 24px;text-align: center" colspan="2">Title</td>
    </tr>
    <tr>
      <td style="padding-top: 10px;">
        <asp:Label runat="server">First Name</asp:Label>
      </td>
      <td style="padding-top: 10px;padding-left: 10px">
        <input type="text" />
      </td>
    </tr>
    <tr>
      <td style="padding-top: 10px;">
        <asp:Label runat="server">Email</asp:Label>
      </td>
      <td style="padding-top: 10px;padding-left: 10px">
        <input type="text" />
      </td>
    </tr>
    <tr>
      <td style="padding-top: 45px;"></td>
      <td style="text-align: center"></td>
    </tr>
  </table>
  <table border="1">
    <tr>
      <td style="padding-top: 20px; word-wrap: break-word;text-align: center">1111111111111</td>
    </tr>
  </table>
</div>