How to vertically align a floating table inside a td

Question

Is it possible to vertically align table 3 at the bottom in the following example?

This is for a mail signature, hence the use of tables and the hack with align to make the tables responsive (they'll stack underneath each other if viewport gets too small). Now, the client wants the logo in table 3 to be aligned at the bottom (see example image ) and I'm beginning to wonder if this is even possible while keeping it mobile friendly.

I've tried vertical-alignment: bottom pretty much everywhere and margin-top: auto; margin-bottom: 0; margin-top: auto; margin-bottom: 0; on table 3 to no avail. I'm guessing the align="left" overrides pretty much ever vertical alignment styling I'm trying to make.

        <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

You could use a vertical-align and give the cell a height using 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>