Сделайте две таблицы одинаковой высоты в элементе <td>- одну таблицу с изображением фиксированной высоты, а другую только с текстом - PullRequest
Новая
       46

Сделайте две таблицы одинаковой высоты в элементе <td>- одну таблицу с изображением фиксированной высоты, а другую только с текстом

0 голосов
/ 05 ноября 2019

У меня есть две таблицы внутри элемента (обе шириной 50%, одна плавающая влево и другая плавающая вправо), первая содержит изображение с фиксированной высотой 60 пикселей, а другая содержит только текст. Проблема в том, что вторая таблица имеет меньшую высоту, чем первая, но я хочу, чтобы они имели одинаковую высоту и были вертикально выровнены по середине. Код: 

 <td style="vertical-align: middle;">
                            <table border="0" cellpadding="0" cellspacing="0" style="width: 50%; float: left">
                                <tr>
                                    <td style="vertical-align: middle; padding-left: 10px">
                                        <a href="" target="_blank" style="pointer-events: none; text-decoration: underline; display: flex; width: fit-content; padding: 3px;">
                                          <img 
                                            src="${companyLogo}"
                                            alt="company logo" 
                                            style="border: none; -ms-interpolation-mode: bicubic; height: auto; max-height: 60px; width: auto;"
                                          >
                                        </a>
                                    </td>
                                </tr>
                            </table>
                             <table border="0" cellpadding="0" cellspacing="0" style="width: 50%; float: right">
                                <tr>
                                    <td style="vertical-align: middle; color: ${titleTextColor.value}">
                                        ${titleText.value}
                                    </td>
                                </tr>
                            </table>
                        </td>

Так они выглядят так:

Первый стол

Второй стол

Итак, общий результат - строка с двумя смежными таблицами разных размеров, поэтому содержимое не выровнено по вертикали. Желаемый результат: вторая таблица также должна иметь такой же размер, как и первая, и иметь текст, выровненный по вертикали, как показано на рисунке:

желаемый результат

...