Блог

Главная - Вопросы по программированию - Как синхронизировать высоту строк таблицы для электронных писем

Как синхронизировать высоту строк таблицы для электронных писем

#html #css #html-table #html-email

#HTML #css #html-таблица #html-электронная почта

Вопрос:

Я создаю электронную почту с помощью шаблона html. Одна из вещей — это таблица из 4 в штучной упаковке с 1 изображением и 2 в штучной упаковке с другим содержимым.

При изменении размера экрана изображение также изменяется. В этом контексте:

Есть ли возможность сделать так, чтобы каждая из этих 2 строк имела одинаковую высоту, учитывая, что строка 1 имеет динамическое изображение, которое сжимается?

 <table>
<tbody>
  <tr>
    <td width="50%" style="background-color:green;">
      <p>
        Some content
      </p>
    </td>
    <td width="50%">
      <img src="https://placehold.it/300x300?text= ">
    </td>
  </tr>
  <tr>
    <td width="50%"  style="background-color:green;">
      <p>
        Some content
      </p>
    </td>
    <td width="50%"  style="background-color:green;">
      <p>
        Some content
      </p>
    </td>
  </tr>
</tbody>
</table>

Ссылка для работы с таблицей HTML a — https://jsfiddle.net/dL2zogxr/1 /

Комментарии:

1. Если вам не нужно помещать другое содержимое в один из столбцов второй строки, одной из идей было бы поместить туда второе (фиктивное) изображение, которое имеет тот же масштаб, что и первое изображение…

2. Я бы посоветовал, поскольку ваше изображение имеет ширину 300 пикселей, установить разрыв, который разрывают столбцы. когда у вас есть изображение на мобильном устройстве шириной 160 пикселей, а текст также шириной 160 пикселей, изображение слишком маленькое, и текст будет выглядеть как сумасшедший. Google «fluid template», если вы хотите разбить таблицу и создать более отзывчивое электронное письмо