Фон таблицы CSS не работает должным образом в Outlook

#html #css

#HTML #CSS

Вопрос:

У меня есть простая HTML-таблица, используемая в шаблоне электронной почты:

 lt;table id="x_formHeaderTable" style="width:100%; margin:0; padding:0; background-color:#FCE68D; border-style: solid; border-color: #000000;"gt;  lt;tbodygt;  lt;trgt;  lt;td style="height:4px"gt;lt;/tdgt;  lt;/trgt;  lt;trgt;  lt;td style="width:1%"gt;lt;/tdgt;  lt;td style="width:49%; text-align:left; vertical-align:top"gt;lt;emgt;Some text in herelt;/emgt;lt;/tdgt;  lt;td style="width:49%; text-align:right; vertical-align:top"gt;lt;stronggt;Another text in herelt;/tdgt;  lt;td style="width:1%"gt;lt;/tdgt;  lt;/trgt;  lt;trgt;  lt;td style="height:4px"gt;lt;/tdgt;  lt;/trgt;  lt;/tbodygt; lt;/tablegt; 

он отображается правильно (как в предварительном просмотре фрагмента) в каждом клиенте, который я тестировал, за исключением (очевидно) Перспективы, где это выглядит так: сломанный дисплей стола

Что я могу сделать, чтобы это исправить?

Ответ №1:

Вы можете попробовать добавить свойство colspan для одиночных двух tds и неразрывный пробел ( amp;nbsp; ), чтобы придать им значение примерно так:

 lt;table id="x_formHeaderTable" style="width:100%; margin:0; padding:0; background-color:#FCE68D; border-style: solid; border-color: #000000;"gt;  lt;tbodygt;  lt;trgt;  lt;td style="height:4px" colspan="4"gt;amp;nbsp;lt;/tdgt;  lt;/trgt;  lt;trgt;  lt;td style="width:1%"gt;lt;/tdgt;  lt;td style="width:49%; text-align:left; vertical-align:top"gt;lt;emgt;Some text in herelt;/emgt;lt;/tdgt;  lt;td style="width:49%; text-align:right; vertical-align:top"gt;lt;stronggt;Another text in herelt;/tdgt;  lt;td style="width:1%"gt;lt;/tdgt;  lt;/trgt;  lt;trgt;  lt;td style="height:4px" colspan="4"gt;amp;nbsp;lt;/tdgt;  lt;/trgt;  lt;/tbodygt; lt;/tablegt; 

Ответ №2:

Просто обновите приведенный ниже код,

 lt;table id="x_formHeaderTable" style="width:100%; margin:0; padding:0; background-color:#FCE68D; border-style: solid; border-color: #000000;"gt;  lt;tbodygt;  lt;trgt;  lt;td style="width:1%;height:4px;"gt;lt;/tdgt;  lt;td style="width:49%;"gt;lt;/tdgt;  lt;td style="width:49%;"gt;lt;/tdgt;  lt;td style="width:1%"gt;lt;/tdgt;  lt;/trgt;  lt;trgt;  lt;td style="width:1%"gt;lt;/tdgt;  lt;td style="width:49%; text-align:left; vertical-align:top"gt;lt;emgt;Some text in herelt;/emgt;lt;/tdgt;  lt;td style="width:49%; text-align:right; vertical-align:top"gt;lt;stronggt;Another text in herelt;/stronggt;lt;/tdgt;  lt;td style="width:1%"gt;lt;/tdgt;  lt;/trgt;  lt;trgt;  lt;td style="width:1%;height:4px;"gt;lt;/tdgt;  lt;td style="width:49%;"gt;lt;/tdgt;  lt;td style="width:49%;"gt;lt;/tdgt;  lt;td style="width:1%"gt;lt;/tdgt;  lt;/trgt;  lt;/tbodygt; lt;/tablegt;