Почему табличные блоки не отображаются подряд в Outlook? - PullRequest
Новая
       4

Почему табличные блоки не отображаются подряд в Outlook?

2 голосов
/ 10 января 2020

Я создаю адаптивный шаблон электронной почты, для которого мне нужно 6 книг подряд. Ширина основного стола составляет 600 пикселей, ширина таблицы книг равна 15% , а ширина таблицы, выделенной красным цветом (для промежутков между таблицами), составляет 2% . Все таблицы выровнены по левому краю .

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

Пример Outlook 2016

Outlook 2016

Примечание. Я пытался использовать одну таблицу с 6 <td>, но она не работала в Andorid 4.4, поэтому я использую эту структуру таблицы. 

/* MOBILE STYLES */

@media screen and (max-width: 520px) {
  /* FULL-WIDTH TABLES */
  table[class="responsive-table"] {
    width: 100%!important;
  }
}
<table border="0" cellpadding="0" cellspacing="0" width="600" class="responsive-table" align="center" bgcolor="yellow">

  <tr>
    <td>
      <!-- TWO COLUMNS -->
      <table cellspacing="0" cellpadding="0" border="0" width="100%">
        <tr>
          <td valign="top" style="padding: 0;">

            <table cellpadding="0" cellspacing="0" border="0" width="15%" align="left" class="responsive-table">
              <tr>
                <td align="center"><img src="http://placehold.jp/85x120.png" alt="" width="85" border="0"></td>
              </tr>
            </table>


            <table width="2%" height="10" border="0" align="left" cellpadding="0" cellspacing="0" bgcolor="red" class="responsive-table">
              <tr>
                <td>&nbsp;</td>
              </tr>
            </table>


            <table cellpadding="0" cellspacing="0" border="0" width="15%" align="left" class="responsive-table">
              <tr>
                <td align="center"><img src="http://placehold.jp/85x120.png" alt="" width="85" border="0"></td>
              </tr>
            </table>
            <table width="2%" height="10" border="0" align="left" cellpadding="0" cellspacing="0" bgcolor="red" class="responsive-table">
              <tr>
                <td>&nbsp;</td>
              </tr>
            </table>
            <table cellpadding="0" cellspacing="0" border="0" width="15%" align="left" class="responsive-table">
              <tr>
                <td align="center"><img src="http://placehold.jp/85x120.png" alt="" width="85" border="0"></td>
              </tr>
            </table>

            <table width="2%" height="10" border="0" align="left" cellpadding="0" cellspacing="0" bgcolor="red" class="responsive-table">
              <tr>
                <td>&nbsp;</td>
              </tr>
            </table>


            <table cellpadding="0" cellspacing="0" border="0" width="15%" align="left" class="responsive-table">
              <tr>
                <td align="center"><img src="http://placehold.jp/85x120.png" alt="" width="85" border="0"></td>
              </tr>
            </table>

            <table width="2%" height="10" border="0" align="left" cellpadding="0" cellspacing="0" bgcolor="red" class="responsive-table">
              <tr>
                <td>&nbsp;</td>
              </tr>
            </table>


            <table cellpadding="0" cellspacing="0" border="0" width="15%" align="left" class="responsive-table">
              <tr>
                <td align="center"><img src="http://placehold.jp/85x120.png" alt="" width="85" border="0"></td>
              </tr>
            </table>
            <table width="2%" height="10" border="0" align="left" cellpadding="0" cellspacing="0" bgcolor="red" class="responsive-table">
              <tr>
                <td>&nbsp;</td>
              </tr>
            </table>
            <table cellpadding="0" cellspacing="0" border="0" width="15%" align="left" class="responsive-table">
              <tr>
                <td align="center"><img src="http://placehold.jp/85x120.png" alt="" width="85" border="0"></td>
              </tr>
            </table>
            <!-- RIGHT COLUMN -->
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

1 Ответ

0 голосов
/ 15 января 2020

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

Это может решить вашу проблему. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    @media screen and (max-width: 520px) {
        /* FULL-WIDTH TABLES */
        table[class="responsive-table"] {
            width: 100%!important;
        }
    }
</style>
</head>
<body>
    <table border="0" cellpadding="0" cellspacing="0" width="600" class="responsive-table" align="center" bgcolor="yellow">
        <tr>
          <td>
            <!-- TWO COLUMNS -->
            <table cellspacing="0" cellpadding="0" border="0" width="100%">
              <tr>
                  <td width="15%">
                      <img src="http://placehold.jp/85x120.png" alt="" width="100%" border="0">
                  </td>
                  <td width="2%" bgcolor="red"></td>
                  <td width="15%">
                      <img src="http://placehold.jp/85x120.png" alt="" width="100%" border="0">
                  </td>
                  <td width="2%" bgcolor="red"></td>
                  <td width="15%">
                      <img src="http://placehold.jp/85x120.png" alt="" width="100%" border="0">
                  </td>
                  <td width="2%" bgcolor="red"></td>
                  <td width="15%">
                      <img src="http://placehold.jp/85x120.png" alt="" width="100%" border="0">
                  </td>
                  <td width="2%" bgcolor="red"></td>
                  <td width="15%">
                      <img src="http://placehold.jp/85x120.png" alt="" width="100%" border="0">
                  </td>
                  <td width="2%" bgcolor="red"></td>
                  <td width="15%">
                      <img src="http://placehold.jp/85x120.png" alt="" width="100%" border="0">
                  </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
</body>
</html>

Снимок 1

Снимок 2

Снимок 3

...