javascript - 如何解决Outlook中自定义表格标签不兼容问题

Question

在outlook2016 上，使用rowspan 的表格中会有间隙。
其他邮箱客户端不会出现此问题。

想自定义html为邮件，table标签不兼容。我尝试了一些 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

标签： javascripthtmlcss

Answer 1

如果要对列使用 (colspan) 进行合并，可以尝试将所有列 (td) 保留在一行 (tr) 中，如果要对行进行合并，则使用 (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>

在此处查看示例

更新：

此处更新示例