Как решить проблему несовместимости пользовательских тегов таблиц в Outlook

Question

На outlook2016 в таблице будут пропуски с использованием rowspan.Эта проблема не возникает с другими клиентами почтовых ящиков.

Я хочу настроить HTML как электронную почту, и тег таблицы несовместим.Я попробовал немного CSS, например dispaly:block outlook http://sowcar.com/t6/695/1554344627x2362277805.png

<table style="width: 100%; border-collapse: collapse;" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th style="padding: 5px 0; border: 1px solid #bdbdbd; text-align: center; background-color: pink;">xxxxx</th>
<th style="padding: 5px 0; border: 1px solid #bdbdbd; text-align: center; background-color: pink;">xxxxx</th>
<th style="padding: 5px 0; border: 1px solid #bdbdbd; text-align: center; background-color: pink;">xxxxx</th>
<th style="padding: 5px 0; border: 1px solid #bdbdbd; text-align: center; background-color: pink;">xxxxxx</th>
<th style="padding: 5px 0; border: 1px solid #bdbdbd; text-align: center; background-color: pink;">xxxxx</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 5px 0; border: 1px solid #bdbdbd; text-align: center;" rowspan="3">xxxxxx</td>
<td style="padding: 5px 0; border: 1px solid #bdbdbd; text-align: center;" rowspan="3">xxxxx</td>
</tr>
<tr>
<td style="padding: 5px 0; border: 1px solid #bdbdbd; text-align: center;" rowspan="2">xxxxx</td>
</tr>
<tr>
<td style="padding: 5px 0; border: 1px solid #bdbdbd; text-align: center;">xxxxx</td>
<td style="padding: 5px 0; border: 1px solid #bdbdbd; text-align: center;">xxxxxxx</td>
</tr>
</tbody>
</table>

Таблица динамическая, это может выглядеть так:https://codepen.io/scheinin/pen/LaQpRV

Это результат, который я ожидал аватар http://sowcar.com/t6/695/1554344880x2890208949.png

Answer 1

Вы можете попробовать сохранить все столбцы (td) в одной строке (tr), если вы хотите пометить использование столбца (colspan) и если вы хотите пометить строку, тогда используйте (rowspan).

Вы можете сделатьэто путем объединения всех столбцов в одну строку.

<table style="width: 100%; border-collapse: collapse;" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th style="padding: 5px 0; border: 1px solid #bdbdbd; text-align: center; background-color: pink;">xxxxx</th>
<th style="padding: 5px 0; border: 1px solid #bdbdbd; text-align: center; background-color: pink;">xxxxx</th>
<th style="padding: 5px 0; border: 1px solid #bdbdbd; text-align: center; background-color: pink;">xxxxx</th>
<th style="padding: 5px 0; border: 1px solid #bdbdbd; text-align: center; background-color: pink;">xxxxxx</th>
<th style="padding: 5px 0; border: 1px solid #bdbdbd; text-align: center; background-color: pink;">xxxxx</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 5px 0; border: 1px solid #bdbdbd; text-align: center;">xxxxxx</td>
<td style="padding: 5px 0; border: 1px solid #bdbdbd; text-align: center;">xxxxx</td>
<td style="padding: 5px 0; border: 1px solid #bdbdbd; text-align: center;">xxxxx</td>
<td style="padding: 5px 0; border: 1px solid #bdbdbd; text-align: center;">xxxxx</td>
<td style="padding: 5px 0; border: 1px solid #bdbdbd; text-align: center;">xxxxxxx</td>
</tr>
</tbody>
</table>

Проверьте пример здесь

Обновление:

Обновлен пример здесь