@Nivaech

Как в html таблицах переносить элемент на следующую строку (в письмах для Outlook)?

Пытаюсь оптимизировать письмо для десктопного Outlook.
В письме есть секция, в которой при создании файла мапятся нужные блоки в определенную строку.
Этих блоков может быть разное количество.

Проблема в том, что когда эти блоки перестают вмещаться в tr, они не переносятся на следующую строку. Это частично исправилось добавлением параметра display: block в элемент table, и display: inline-block в элементы td, которые и мапятся в секцию.
Теперь работает везде, кроме десктопного Outlook, там блоки не переходят на следующую строку, если не вмещаются, а просто мапятся дальше, до бесконечности расширяя контейнер с письмом, в зависимости от их количества.

Код блока выглядит так:
<tr>
  <td colspan="2" style="padding: 24px 40px 0px 40px">
    <table
      border="0"
      cellpadding="0"
      cellspacing="0"
      width="100%"
      style="
        border-collapse: collapse;
        border-spacing: 0;
        mso-table-lspace: 0;
        mso-table-rspace: 0;
      "
    >
      <tr>
        <td style="padding-bottom: 24px">
          <table
            border="0"
            cellpadding="0"
            cellspacing="0"
            class="values-default"
            style="display: block"
          >
            <tr>
              <td style="padding: 12px; display: inline-block">
                <span> Block 1</span>
              </td>
              <td style="padding: 12px; display: inline-block">
                <span> Block 2 </span>
              </td>
              <td style="padding: 12px; display: inline-block">
                <span> Block 3 </span>
              </td>
              <td style="padding: 12px; display: inline-block">
                <span> Block 4 </span>
              </td>
              <td style="padding: 12px; display: inline-block">
                <span> Block 5 </span>
              </td>
              <td style="padding: 12px; display: inline-block">
                <span> Block 6 </span>
              </td>
              <td style="padding: 12px; display: inline-block">
                <span> Block 7 </span>
              </td>
              <td style="padding: 12px; display: inline-block">
                <span> Block 8 </span>
              </td>
              <td style="padding: 12px; display: inline-block">
                <span> Block 9 </span>
              </td>
              <td style="padding: 12px; display: inline-block">
                <span> Block 10 </span>
              </td>
              <td style="padding: 12px; display: inline-block">
                <span> Block 11 </span>
              </td>
              <td style="padding: 12px; display: inline-block">
                <span> Block 12 </span>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </td>
</tr>


На этих картинках пример. Первый скриншот - ожидаемое поведение, второй - как это рендерит Outlook.

608699efe8278257472822.png
608699f6e58d7549096402.png

Как сделать так, чтобы элементы в Outlook переносились на новую строку, если перестают помещаться в одной строке?
  • Вопрос задан
  • 115 просмотров
Решения вопроса 1
sergski
@sergski
web-developer
оставьте в строке 1 столбец, а в нём ваши блоки, но каждый в таблице с align="left"
пример
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы