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

Question

У меня есть электронное письмо со следующей таблицей. При тестировании в gmail выглядит абсолютно нормально, но в перспективе ширина таблицы уменьшается, а граница не отображается так, как должна. Я перепробовал все, что мог, но, похоже, это не сработало. Если у вас есть идеи, пожалуйста, поделитесь.

<table cellpadding="0" cellspacing="0" style="font-family: Avenir, Helvetica, sans-serif; border-collapse: collapse; padding: 0; width: 100% !important;">
<thead style="font-family: Avenir, Helvetica, sans-serif; margin-top: 0;">
<tr style="color: #000; margin: 0; padding: 0; margin-top: 0; margin-bottom: 0;">
<th style="border-bottom: 1px solid #cccccc; font-weight: bold; color: #f2a489; margin: 0; font-size: 12px; padding-top: 15px; font-family: Avenir, Helvetica, sans-serif; margin-top: 0; text-align: left;">Item</th>
<th style="border-bottom: 1px solid #cccccc; font-weight: bold; color: #f2a489; margin: 0; font-size: 12px; padding-top: 15px; font-family: Avenir, Helvetica, sans-serif; text-align: left;">Size</th>
<th style="border-bottom: 1px solid #cccccc; font-weight: bold; color: #f2a489; margin: 0; font-size: 12px; padding-top: 15px; font-family: Avenir, Helvetica, sans-serif; text-align: right;">Quantity</th>
<th style="border-bottom: 1px solid #cccccc; font-weight: bold; color: #f2a489; margin: 0; font-size: 12px; padding-top: 15px; font-family: Avenir, Helvetica, sans-serif; margin-bottom: 0; text-align: right;">Subtotal</th>
</tr>
</thead>
<tbody style="font-family: Avenir, Helvetica, sans-serif; margin-bottom: 0;">
<tr style="color: #000; margin: 0; padding: 0; margin-top: 0;">
<td style="font-size: 12px; font-family: Avenir, Helvetica, sans-serif; margin: 0; margin-top: 0; border-bottom: 1px solid #cccccc !important; padding: 10px 0 !important; text-align: left;">Cadburys overload</td>
<td style="font-size: 12px; font-family: Avenir, Helvetica, sans-serif; margin: 0; border-bottom: 1px solid #cccccc !important; padding: 10px 0 !important; text-align: left;">Minis</td>
<td style="font-size: 12px; font-family: Avenir, Helvetica, sans-serif; margin: 0; border-bottom: 1px solid #cccccc !important; padding: 10px 0 !important; text-align: right;">6</td>
<td style="font-size: 12px; font-family: Avenir, Helvetica, sans-serif; margin: 0; margin-bottom: 0; border-bottom: 1px solid #cccccc !important; padding: 10px 0 !important; text-align: right;">£ 33.00</td>
</tr>
<tr style="color: #000; margin: 0; padding: 0;">
<td style="font-size: 12px; font-family: Avenir, Helvetica, sans-serif; margin: 0; margin-top: 0; border-bottom: 1px solid #cccccc !important; padding: 10px 0 !important; text-align: left;">Fruit Overload</td>
<td style="font-size: 12px; font-family: Avenir, Helvetica, sans-serif; margin: 0; border-bottom: 1px solid #cccccc !important; padding: 10px 0 !important; text-align: left;">Large</td>
<td style="font-size: 12px; font-family: Avenir, Helvetica, sans-serif; margin: 0; border-bottom: 1px solid #cccccc !important; padding: 10px 0 !important; text-align: right;">1</td>
<td style="font-size: 12px; font-family: Avenir, Helvetica, sans-serif; margin: 0; margin-bottom: 0; border-bottom: 1px solid #cccccc !important; padding: 10px 0 !important; text-align: right;">£ 78.00</td>
</tr>
<tr style="color: #000; margin: 0; padding: 0; margin-bottom: 0;">
<td style="font-size: 12px; font-family: Avenir, Helvetica, sans-serif; margin: 0; margin-top: 0; border-bottom: 1px solid #cccccc !important; padding: 10px 0 !important; text-align: left;">Total paid</td>
<td style="font-size: 12px; font-family: Avenir, Helvetica, sans-serif; margin: 0; border-bottom: 1px solid #cccccc !important; padding: 10px 0 !important; text-align: left;"></td>
<td style="font-size: 12px; font-family: Avenir, Helvetica, sans-serif; margin: 0; border-bottom: 1px solid #cccccc !important; padding: 10px 0 !important; text-align: right;"></td>
<td style="font-size: 12px; font-family: Avenir, Helvetica, sans-serif; margin: 0; margin-bottom: 0; border-bottom: 1px solid #cccccc !important; padding: 10px 0 !important; text-align: right;">£ 111.00</td>
</tr>
</tbody>
</table>

Пожалуйста, смотрите изображения с таблицей в Gmail (как это должно выглядеть) и в Outlook

Я приложил код здесь https://jsfiddle.net/ry2sfq61/

Спасибо!

Answer 1

Outlook, как известно, глючит, когда дело доходит до применения границы к <td>.

Добавьте это к td встроенным таблицам стилей, где вы хотите создать рамку:

mso-border-bottom-alt: solid #cccccc 1pt;

Если вы хотите таблицу определенной ширины, вы должны добавить:

<table width="600"> Вы можете попробовать <table style="width: 600px;">

Иногда Outlook игнорирует width: 100%; или width: 600px; и другие свойства во встроенной таблице стилей. Это может быть настоящей головной болью.

Удачи.

Answer 2

Согласно моему тесту, вы можете изменить <table> на следующий код:

<table width="100%" cellpadding="0" cellspacing="0" style="font-family: Avenir, Helvetica, sans-serif; border-collapse: collapse; padding: 0;">

Это мой результат:

Answer 3

Попробуйте удалить !important из ширины элемента table, чтобы ширина была просто: width: 100%;.

Если это не сработает, вам может потребоваться зафиксировать статическую ширину, а не процент, то есть width: 600px.