HTML неправильно отображается в Outlook 2016? - PullRequest
Новая
       39

HTML неправильно отображается в Outlook 2016?

0 голосов
/ 11 февраля 2020

Я создал простой HTML шаблон электронной почты, используя HandlebarsJS.

Я настроил текст и таблицу для центрирования в электронном письме.

Однако элемент таблицы по центру с левой стороны, но справа он проливается к правой границе электронного письма.

Это происходит , а не , когда я открываю файл HTML в chrome - только в Outlook.

Как этого избежать в Outlook?

HTML, относящихся к таблице: 

    <div class="table">
    <table id="carTable" role="presentation" cellspacing="0" cellpadding="0" border="0">
        <tbody>
        <tr>
            <th>Car Number</th>
            <th>Group</th>
        </tr>
        <!-- {{#each cars}} -->
        <tr>
            <td>{{carNumber}}</td>
            <td>{{processGroup}}</td>
        </tr>
        <!--{{/each}} -->
        </tbody>
    </table>
</div>

CSS относительно таблицы: 

    <style>
    #carTable tr, td, th {
   padding: 10px;
   font-family: Arial;
   font-size: 13px;
   font-weight: normal;
   font-stretch: normal;
   font-style: normal;
   line-height: 1.38;
   letter-spacing: normal;
   color: #333333;
   }

   #carTable{
   border: solid 1px #cccccc;
   }

   #carTable td,
   th {
   height: 30px;
   transition: all 0.3s;
   /* Simple transition for hover effect */
   }

   #carTable th {
   background: #DFDFDF;
   /* Darken header a bit */
   font-weight: bold;
   text-align: left
   }

   #carTable td {
   background: #FAFAFA;
   text-align: left
   }

   /* Cells in even rows (2,4,6...) are one color */
   #carTable tr:nth-child(even) td {
   background: #F1F1F1;
   }

   /* Cells in odd rows (1,3,5...) are another (excludes header cells)  */
   #carTable tr:nth-child(odd) td {
   background: #FEFEFE;
   }

   #carTable tr>:nth-child(1):not(th){
   font-weight: bold;
   color: #2d89ac;
   }
   </style>

Ссылка CodePen с полным HTML кодом: https://codepen.io/Java123999/pen/zYGBoPe

Снимок экрана выпуска, таблица примечаний в соответствии с пунктами слева, но не справа

enter image description here

1 Ответ

1 голос
/ 12 февраля 2020

Outlook использует Microsoft Word в качестве движка рендеринга. Вы должны играть по правилам Outlook. Используйте старую школу HTML со столами и включайте стили, где это возможно. Для быстрого тестирования в Outlook, если у вас есть доступ к нему, попробуйте отправить себе HTML электронное письмо. Я не знаю, какую версию вы используете, но быстрый поиск "outlook send html email" должен дать хорошие результаты.

...