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

时间:2019-04-04 02:32:10

标签: javascript html5 css3

在Outlook2016上,使用rowspan的表格中将存在空白。
其他邮箱客户端不会发生此问题。

我想将html自定义为电子邮件,并且表标签不兼容。我尝试了一些CSS,例如<hr /><h2>California</h2> <p><strong>Term 1:</strong> (Eastern division): Tuesday 29 January — Friday 12 April</p> <p><strong>Term 1:</strong> (Western division): Tuesday 5 February — Friday 12 April</p> <p><strong>Term 2</strong><strong>:</strong> Monday 29 April — Friday 5 July</p> <p><strong>Term 3:</strong> Monday 22 July — Friday 27 September</p> <p><strong>Term 4:</strong> Monday 14 October — Friday 20 December</p> <hr /><h2>New York</h2> <p><strong>Term 1</strong>: Tuesday 29 January — Friday 12 April</p> <p><strong>Term 2:</strong> Monday 29 April — Friday 5 July</p> <p><strong>Term 3</strong>: Monday 22 July — Friday 27 September</p> <p><strong>Term 4</strong>: Monday 14 October — Friday 13 December</p> </pre> soup = BeautifulSoup(page.text, 'html.parser') for each_div in soup.findAll(['h2', 'p']): myval = str(each_div.prettify("ascii"))
outlook http://sowcar.com/t6/695/1554344627x2362277805.png

dispaly:block

表是动态的,可能是这样的:
https://codepen.io/scheinin/pen/LaQpRV

这是我期望的结果
avatar http://sowcar.com/t6/695/1554344880x2890208949.png

1 个答案:

答案 0 :(得分:1)

如果您想使列使用量(colspan)等于零,而希望使行使用然后(rowspan)等于零,则可以尝试将所有列(td)保留在一行(tr)中。

您可以通过将所有列合并为一行来完成此操作。

<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

更新:

Updated example here