如何在td中垂直对齐浮动表

Question

在下面的示例中，是否可以将表3垂直对齐？

这是用于邮件签名的，因此可以使用表和带有align的黑客来使表响应(如果视图端口太小，它们将在彼此下面堆叠)。现在，客户端希望表3中的徽标在底部对齐(请参阅示例图像)，我开始怀疑这样做是否可行，同时保持移动友好。

我几乎在任何地方都尝试过vertical-alignment: bottom，在表3上尝试了margin-top: auto; margin-bottom: 0;，但没有结果。我猜align="left"在很大程度上超过了我想要做的垂直对齐样式。

        <table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #000 solid; max-width: 903px; width: 100%">
            <tr>
              <td>
                <!-- "responsive" tables -->

                <!-- table 1 -->
                <table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #ff0000 solid; width: 300px;">
                  <tr>
                    <td>
                      Company logo
                    </td>
                  </tr>
                </table>

                <!-- table 2 -->
                <table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #00ff00 solid; width: 300px;">
                  <tr>
                    <td>
                      Contact details<br>
                      <br>
                      <br>
                    </td>
                  </tr>
                </table>

                <!-- table 3 -->
                <table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #0000ff solid; width: 300px;">
                  <tr>
                    <td>
                      Another logo
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>

Answer 1

您可以使用垂直对齐，并给单元格一个高度使用CSS。

​

@media (min-width: 1000px) {
.logoHolder td {
  height: 50px;
  vertical-align: bottom;
}}

<table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #000 solid; max-width: 903px; width: 100%">
  <tr>
    <td>
      <!-- "responsive" tables -->

      <!-- table 1 -->
      <table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #ff0000 solid; width: 300px;">
        <tr>
          <td>
            Company logo
          </td>
        </tr>
      </table>

      <!-- table 2 -->
      <table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #00ff00 solid; width: 300px;">
        <tr>
          <td>
            Contact details<br>
            <br>
            <br>
          </td>
        </tr>
      </table>

      <!-- table 3 -->
      <table class="logoHolder" align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #0000ff solid; width: 300px;vertical-align: bottom;">
        <tr>
          <td style="vertical-align: bottom;">
            Another logo
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

​