Как создать гибкую HTML-таблицу, которая настраивается от 3х2 до 2х3 для отзывчивой электронной почты? - PullRequest
Новая
       42

Как создать гибкую HTML-таблицу, которая настраивается от 3х2 до 2х3 для отзывчивой электронной почты?

0 голосов
/ 07 июня 2019

Я работаю над адаптивным шаблоном электронной почты, и мне бы очень хотелось, чтобы макет таблицы для рекомендуемых продуктов был 3х2 на рабочем столе, 2х3 на мобильном.

В настоящее время я использую таблицу с ячейками, которые меняются для отображения в виде встроенного блока для мобильных клиентов. Тем не менее, это нарушает Outlook и Thunderbird, так как они отображают все ячейки в одной строке. Я пытался плавать элементы, но они снова ломаются.

Сетка таблицы от 3х2 до 2х3

CSS 

     @media screen and (max-width: 600px) {
        .stack2 {
          width: 50% !important;
        }
      }

      .stack2 {
        display: inline-block;
        box-sizing: border-box;
      }

HTML 


<table width="100%" cellpadding="0px" cellspacing="0px" border="0px">
  <tr>
    <!-- Product #1 -->
    <td class="stack2" width="33.33%" style="padding:20px;">

    </td>
    <!-- Product #2 -->
    <td class="stack2" width="33.33%" style="padding:20px;">

    </td>
    <!-- Product #3 -->
    <td class="stack2" width="33.33%" style="padding:20px;">

    </td>
    <!-- Product #4 -->
    <td class="stack2" width="33.33%" style="padding:20px;">

    </td>
    <!-- Product #5 -->
    <td class="stack2" width="33.33%" style="padding:20px;">

    </td>
    <!-- Product #6 -->
    <td class="stack2" width="33.33%" style="padding:20px;">

    </td>
  </tr>
</table>

1 Ответ

0 голосов
/ 07 июня 2019

Не используйте для этого ячейки таблицы. Клетки будут продолжать укладываться бок о бок подряд, и это их естественное и предполагаемое поведение.
Единственный способ для ячейки таблицы появиться под другими, это в другой строке.
Ваша реализация идет вразрез с логикой HTML.

Вместо этого я бы пошел с таблицами для этого. Таким образом, они будут легко складываться и переставляться в зависимости от ширины, которую вы им дадите. Просто помните, что вам нужно будет использовать таблицы-призраки, чтобы таблицы располагались рядом в Outlook.

Вот свободный пример (включая таблицы Ghost) для вас, чтобы приспособиться к работе: 

<table border="0" cellspacing="0" cellpadding="0" class="FullWidthOnMobile" style="width:600px;">
<tr>
    <td>
        <!--[if (gte mso 9)|(IE)]>
        <table border="0" cellspacing="0" cellpadding="0" style="width:100%;">
        <tr>
        <td style="width:200px;">
        <![endif]-->
        <table align="left" border="0" cellspacing="0" cellpadding="0" class="HalfWidthOnMobile" style="width:200px;">
            <tr>
                <td bgcolor="red" style="padding:10px 0; border:1px solid #fff;">&nbsp;</td>
            </tr>
        </table>
        <!--[if (gte mso 9)|(IE)]>
        </td>
        <td>
        <![endif]-->
        <table align="left" border="0" cellspacing="0" cellpadding="0" class="HalfWidthOnMobile" style="width:200px;">
            <tr>
                <td bgcolor="red" style="padding:10px 0; border:1px solid #fff;">&nbsp;</td>
            </tr>
        </table>
        <!--[if (gte mso 9)|(IE)]>
        </td>
        <td style="width:200px;">
        <![endif]-->
        <table align="left" border="0" cellspacing="0" cellpadding="0" class="HalfWidthOnMobile" style="width:200px;">
            <tr>
                <td bgcolor="red" style="padding:10px 0; border:1px solid #fff;">&nbsp;</td>
            </tr>
        </table>
        <!--[if (gte mso 9)|(IE)]>
        </td>
        </tr>
        <tr>
        <td style="width:200px;">
        <![endif]-->
        <table align="left" border="0" cellspacing="0" cellpadding="0" class="HalfWidthOnMobile" style="width:200px;">
            <tr>
                <td bgcolor="red" style="padding:10px 0; border:1px solid #fff;">&nbsp;</td>
            </tr>
        </table>
        <!--[if (gte mso 9)|(IE)]>
        </td>
        <td>
        <![endif]-->
        <table align="left" border="0" cellspacing="0" cellpadding="0" class="HalfWidthOnMobile" style="width:200px;">
            <tr>
                <td bgcolor="red" style="padding:10px 0; border:1px solid #fff;">&nbsp;</td>
            </tr>
        </table>
        <!--[if (gte mso 9)|(IE)]>
        </td>
        <td style="width:200px;">
        <![endif]-->
        <table align="left" border="0" cellspacing="0" cellpadding="0" class="HalfWidthOnMobile" style="width:200px;">
            <tr>
                <td bgcolor="red" style="padding:10px 0; border:1px solid #fff;">&nbsp;</td>
            </tr>
        </table>
        <!--[if (gte mso 9)|(IE)]>
        </td>
        </tr>
        </table>
        <![endif]-->
    </td>
</tr>

Медиа-запросы, которые я использовал. Снова адаптируйте их, как я назвал, для простоты понимания того, что я делаю: 

@media only screen and (max-width:600px){
    .FullWidthOnMobile{width:100%!important;min-width:100%!important;}
    .HalfWidthOnMobile{width:50%!important;min-width:50%!important;}
}
...