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

使用margin-left

为第二个表格设置33%值为:nth-child(2)

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>

Answer 2

div {
  display: table;      /* Display the div as a table */
}
div > table {
  display: contents;   /* Ignore the tables and display their contents
                          as if they were contents of the div */
}
div > table:last-child tr:before {
  content: '';         /* Insert a pseudo-element at the beginning */
  display: table-cell; /* Display it as a cell */
}

div {
  display: table;
}
div > table {
  display: contents;
}
div > table:last-child tr:before {
  content: '';
  display: table-cell;
}

<div>
  <table border="1">
    <caption>Title</caption>
    <tr>
      <td>First Name</td>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td>Email</td>
      <td><input type="text" /></td>
    </tr>
  </table>
  <table border="1">
    <tr>
      <td>1111111111111</td>
    </tr>
  </table>
</div>

注意display: contents尚未得到广泛支持。

Answer 3

您可以查看此代码。如果它与您合作，请告诉我。

http://jsfiddle.net/FnK9D/13/

<div style="position:absolute;">

  <table border="1" style="">
    <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" style="float:right;">
    <tr>
      <td style="padding-top: 20px; word-wrap: break-word;text-align: center">1111111111111111</td>
    </tr>
  </table>
    </div>

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

3 个答案: