Как вертикально выровнять плавающую таблицу внутри тд

Question

Можно ли вертикально выровнять таблицу 3 внизу в следующем примере?

Это для подписи почты, отсюда использование таблиц и взлом с alignсделать таблицы отзывчивыми (они будут складываться друг под другом, если область просмотра становится слишком маленькой). Теперь клиент хочет, чтобы логотип в таблице 3 был выровнен внизу (см. пример изображения ), и я начинаю задаваться вопросом, возможно ли это даже при сохранении его мобильности.

Я пробовал vertical-alignment: bottom почти везде и margin-top: auto; margin-bottom: 0; на таблице 3 безрезультатно. Я предполагаю, что 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>