Отобразить ячейку таблицы на всю ширину следующей строки в шаблоне электронной почты - PullRequest
Новая
       4

Отобразить ячейку таблицы на всю ширину следующей строки в шаблоне электронной почты

0 голосов
/ 29 ноября 2018

Я делаю шаблон электронной почты, и на мобильном устройстве я хочу, чтобы td был на всю ширину и оба тд на другой строке: я могу добиться этого, выполнив display: flex; flex-direction: column; на tbody, но это более современное решение, которое не поддерживаетмного почтовых программ.Как я могу достичь этого с помощью поплавков или чего-то менее современного?пробовал: display:block; float: left; width:100%; на обоих td, который выпадает на новой строке, но это не ставит td 100% на tr.Может у кого есть решение?Разметка и встроенные стили приведены ниже. 

<table border="0" cellpadding="0" cellspacing="0"  style=" border-collapse:separate;width: 100%;background:red; padding: 0px 0px;">
    <tbody style="width: 100%; ">

        <tr >

            <td style="padding-left: 35px; position: relative; text-align: center; border-top: 1px solid green;">
                <img width="175px" alt="test" src="img1.png" border="0" style="max-width:100%;vertical-align:top;" />
                <p style="text-transform:uppercase; color: #ffffff; text-align:center; margin:0px; margin-bottom: 50px;    max-width: 180px;margin: auto;">test1</p>

            </td>
            <td style="padding-right: 35px; position: relative; text-align: center; border-top: 1px solid green;">
                <img width="175px" alt="test" src="img2.png" border="0" style="max-width:100%;vertical-align:top;" />
                <p style="text-transform:uppercase; color: #ffffff; text-align:center; margin:0px; margin-bottom: 50px;    max-width: 180px;margin: auto;">test2</p>

            </td>

        </tr>
    </tbody>
</table>

1 Ответ

0 голосов
/ 30 ноября 2018

Вы можете сделать это, установив тд для блокировки, а затем установив ширину на 100%, когда он станет мобильным.Например: 

<head>
   <style>
      /* When the email goes mobile, set width to 100, height auto and make the element block */
      @media screen and (max-width: 630px;){
         .width{width: 100% !important; height: auto !important; display: block !important}
      }
   </style>
</head>
<body>
<!-- Body content etc -->
<table border="0" cellpadding="0" cellspacing="0"  style=" border-collapse:separate;width: 100%;background:red; padding: 0px 0px;">
<tbody style="width: 100%; ">
    <tr >
        <td style="padding-left: 35px; position: relative; text-align: center; border-top: 1px solid green;" class="width">
        <!-- Added the class "width" to the td -->
            <img width="175px" alt="test" src="img1.png" border="0" style="max-width:100%;vertical-align:top;" />
            <p style="text-transform:uppercase; color: #ffffff; text-align:center; margin:0px; margin-bottom: 50px;    max-width: 180px;margin: auto;">test1</p>

        </td>
        <td style="padding-right: 35px; position: relative; text-align: center; border-top: 1px solid green;" class="width">
        <!-- Added the class "width" to the td -->
            <img width="175px" alt="test" src="img2.png" border="0" style="max-width:100%;vertical-align:top;" />
            <p style="text-transform:uppercase; color: #ffffff; text-align:center; margin:0px; margin-bottom: 50px;    max-width: 180px;margin: auto;">test2</p>

        </td>

    </tr>
</tbody>

В качестве альтернативы - вы можете иметь две таблицы в одном и том же ТД и делать один и тот же трюк, чтобы они сидели друг на друге на мобильном телефоне, с той лишь разницей, что выне нужно устанавливать таблицы для отображения блока.И будьте осторожны при использовании табличного метода, так как outlook по умолчанию не будет отображать две таблицы рядом друг с другом, он попытается сложить их.

В этом случае вам нужно будет указать outlook, чтобы сделатьстолбцы, поместив следующий фрагмент между таблицами. 

</table>
<!--[if mso]>
</td>
<td valign="top" align="center">
<![endif]-->
<table>
...