it-swarm.com.ru

Эквивалент плавать в Outlook

Я пытаюсь float: left некоторых таблиц, но только что столкнулся с серьезной проблемой, Outlook не поддерживает float. Ну, тогда я попытался использовать выравнивание таблицы и так далее, но без удачи. Таблицы просто отображаются друг под другом, а не рядом друг с другом. Что-нибудь можно с этим поделать?

PS: он отлично работает на других устройствах, это только Outlook, и я не могу дать каждой таблице тд, так как это сломает некоторые другие вещи.

разметка:

<table class="products">
   <tr>
      <td align="left" class="test">
         <!-- Product 1  -->
         <table align="center">
            <tr>
               <td class="product">
                  <a href="#">
                     <img src="#"/>
                  </a>
               </td>
            </tr>
         </table>
         <!-- Product 2  -->
         <table align="center">
            <tr>
               <td class="product">
                  <a href="#">
                     <img src="#"/>
                  </a>
               </td>
            </tr>
         </table>
         <!-- Product 3 -->
         <table align="center">
            <tr>
               <td class="product">
                  <a href="#">
                     <img src="#"/>
                  </a>
               </td>
            </tr>
         </table>
         <span class="clear"></span>    
      </td>
   </tr>
 </table>
12
Thomas Teilmann

Установите ширину для каждой выровненной таблицы, используя width = "", а не CSS.

Пример, который работает:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
  <style type="text/css">
    table td { border-collapse: collapse; }
    .msoFix { mso-table-lspace:-1pt; mso-table-rspace:-1pt; }
  </style>
</head>
<body style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF">


<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center">
      <div style="max-width:640px !important;">

        <table class="msoFix" width="320" cellpadding="0" cellspacing="0" align="left" bgcolor="#CCCCCC">
          <tr>
            <td width="15" bgcolor="454545">&nbsp;</td>
            <td width="290" bgcolor="454545" align="left" style="padding: 0px;">&nbsp;<br>Table 1<br>...<br>&nbsp;
            </td>
            <td width="15" bgcolor="454545">&nbsp;</td>
          </tr>
        </table>

        <table class="msoFix" width="320" cellpadding="0" cellspacing="0" align="left" bgcolor="#EEEEEE">
          <tr>
            <td width="15" bgcolor="959595">&nbsp;</td>
            <td width="290" bgcolor="959595" align="left" style="padding: 0px;">&nbsp;<br>Table 2<br>...<br>&nbsp;
            </td>
            <td width="15" bgcolor="959595">&nbsp;</td>
          </tr>
        </table>

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

</body></html>

Кроме того, Outlook помещает разрыв в 4-5 пикселей между выровненными таблицами. Добавление этого сокращает его до 1px:

<style type="text/css">
   .msoFix {
      mso-table-lspace:-1pt;
      mso-table-rspace:-1pt;
   }
</style>

Чтобы полностью избавиться от него, вам нужно будет добавить границы к вашим таблицам (еще одна хитрость Outlook).

24
John

Просто поместите каждый sub -table в собственное td внешнего table. так как tds являются друг другом, tables будет также.

При попытке создать HTML-EMails, код, как это было в 1997 году .

4
oezi

Если вы можете жить с тем, что две таблицы не «отвечают» (одна под другой) в Outlook, это сработало для меня:

........
<!--[if gte mso 9]>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
    <td>
<![endif]--> 

<!-- table 1 goes here -->

<!--[if gte mso 9]>
    </td>
    <td>
<![endif]-->

<!-- table 12 goes here -->

<!--[if gte mso 9]>
   </td>
  </tr>
</table>
<![endif]-->
........
2
stefan

Используйте некоторые онлайн-ресурсы, такие как: 

Как кодировать электронные письма HTML

Когда дело доходит до рендеринга HTML, большинство почтовых клиентов примитивны и ломают множество правильно сформированных HTML-элементов.

Следующее обсуждение может быть полезным: 

Какие существуют рекомендации по дизайну электронной почты в формате HTML?

Некоторые основные советы:

  • Используйте таблицы для разметки.
  • Установите для самого широкого стола максимальную ширину 600 пикселей.
  • Не пытайтесь использовать JavaScript или Flash
  • Не используйте CSS в теге стиля, так как некоторые почтовые клиенты его отбрасывают.
  • Используйте только встроенные стили CSS.
1
Zaheer Ahmed

Кажется, Outlook.com полностью отфильтровывает атрибуты float, но поддерживает display: inline-block.
Конечно, это, скорее всего, сломает ваши таблицы, поскольку они зависят от display:table, но может помочь вам с любыми divs.

0
Protector one

Я знаю, что прошло много времени с тех пор, как ОП опубликовал этот вопрос, но я надеюсь, что он поможет всем, кто в этом нуждается.

Если вам нужен макет из 2 столбцов, и вы хотите, чтобы он также работал в Outlook, тогда предоставьте width около 45% для каждой таблицы (для безопасности добавьте также align="left" там). Если вы укажете ширину 50%, Outlook (который имеет собственный разум) отобразит ее как один столбец.

0
user9347891