如何解决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

这是我预期的结果 avatar 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>

Check example here

Update:

Updated example here