提问人：S.Marx 提问时间：11/13/2023 更新时间：11/16/2023 访问量：22
表格邮件布局样式在 Outlook 中未正确显示
Table mail layout styles are not shown correctly in outlook
问：
我正在创建一个带有表格的邮件布局，但我正在努力在 Outlook 中获得所需的结果。
我正在使用 https://app.postdrop.io/ 创建布局，使用 postdrop 我可以将其发送到邮件，所以我正在 gmail 和 Outlook 中对其进行测试。在gmal中看起来一切都很好，正如我所希望的那样。但是在Outlook中，样式没有正确显示，我不知道该尝试什么了。
这是我拥有的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mai layout</title>
</head>
<body style="margin: 0">
<table
style="
max-width: 600px;
margin: 0 auto;
font-family: Arial;
padding: 16px;
"
>
<tr>
<td>
<table
style="
border: 1px solid #e7e8e8;
border-radius: 8px;
padding: 16px;
margin-bottom: 16px;
"
width="100%"
>
<tr>
<td
colspan="2"
style="font-size: 16px; font-weight: 700; color: #006899;"
>
Demo text
</td>
</tr>
<tr>
<td style="width:0">
<img
src="https://cdn3.iconfinder.com/data/icons/feather-5/24/star-16.png"
alt="location"
style="vertical-align:middle; width:16px; height:16px"
/>
</td>
<td>
<span style="
color: #555c5e;
font-size: 14px;
font-weight: 400;
line-height: 22px;
">
Demo text
</span>
</td>
</tr>
<tr>
<td>
<img
src="https://cdn3.iconfinder.com/data/icons/feather-5/24/star-16.png"
alt="work mode"
style="vertical-align:middle; width:16px; height:16px"
/>
</td>
<td
style="
color: #555c5e;
font-size: 14px;
font-weight: 400;
line-height: 22px;
"
>
Demo text
</td>
</tr>
<tr>
<td>
<img
src="https://cdn3.iconfinder.com/data/icons/feather-5/24/star-16.png"
alt="location"
style="vertical-align:middle; width:16px; height:16px"
/>
</td>
<td>
<span style="
color: #555c5e;
font-size: 14px;
font-weight: 400;
line-height: 22px;
">
Demo text
</span>
</td>
</tr>
<tr>
<td colspan="3">
<table style="width: 350px">
<tr>
<td
style="
border-radius: 100px;
padding: 4px 8px;
background-color: #f5f5f6;
color: #3c4447;
width: 1px;
font-weight: 700;
font-size: 12px;
"
>
Demo text
</td>
<td
style="
border-radius: 100px;
padding: 4px 8px;
background-color: #f5f5f6;
color: #3c4447;
width: 1px;
font-weight: 700;
font-size: 12px;
"
>
<img
src="https://cdn3.iconfinder.com/data/icons/feather-5/24/star-16.png"
alt="disability"
style="vertical-align:middle; width:16px; height:16px"
/>
Demo text
</td>
<td
style="
border-radius: 100px;
padding: 4px 8px;
background-color: #f5f5f6;
color: #3c4447;
width: 1px;
font-weight: 700;
font-size: 12px;
"
>
<img
src="https://cdn3.iconfinder.com/data/icons/feather-5/24/star-16.png"
alt="disability"
style="vertical-align:middle; width:16px; height:16px"
/>
Demo text
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
这是我在创建布局时在 postdrop 中看到的：
这是它在 gmail 中的样子：
但在 Outlook 中：
我能做些什么来让outlook获取样式并像gmail一样显示它，这可能吗？谢谢！
答：
0赞
S.Marx
11/16/2023
#1
我找到了解决方案，只需在里面添加另一个表来分隔第一个和第二个块。这是改进后的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Demo text</title>
</head>
<body style="margin: 0">
<table style="max-width: 600px; margin: 0 auto; font-family: Arial">
<tr>
<td
style="border: 1px solid #e7e8e8; border-radius: 8px; padding: 16px"
>
<table style="margin-bottom: 16px" cellspacing="0">
<tr>
<td
colspan="2"
style="
font-size: 20px;
font-weight: 700;
color: #006899;
padding-bottom: 4px;
"
>
Demo text
</td>
</tr>
<tr>
<td>
<img
src="https://cdn3.iconfinder.com/data/icons/feather-5/24/star-16.png"
alt="location"
style="width: 16px; height: 16px"
/>
</td>
<td
style="
color: #555c5e;
font-size: 14px;
font-weight: 400;
line-height: 22px;
padding-bottom: 5.5px;
"
>
Demo text
</td>
</tr>
<tr>
<td>
<img
src="https://cdn3.iconfinder.com/data/icons/feather-5/24/star-16.png"
alt="work"
style="width: 16px; height: 16px"
/>
</td>
<td
style="
color: #555c5e;
font-size: 14px;
font-weight: 400;
line-height: 22px;
padding-bottom: 5.5px;
"
>
Demo text
</td>
</tr>
<tr>
<td>
<img
src="https://cdn3.iconfinder.com/data/icons/feather-5/24/star-16.png"
alt="business"
style="width: 16px; height: 16px"
/>
</td>
<td
style="
color: #555c5e;
font-size: 14px;
font-weight: 400;
line-height: 22px;
padding-bottom: 5.5px;
"
>
Demo text
</td>
</tr>
</table>
<table>
<tr>
<td
style="
border-radius: 100px;
padding: 4px 8px;
background-color: #f5f5f6;
color: #3c4447;
font-weight: 700;
font-size: 12px;
"
>
<span>Demo text</span>
</td>
<td> </td>
<td
style="
border-radius: 100px;
padding: 4px 8px;
background-color: #f5f5f6;
color: #3c4447;
font-weight: 700;
font-size: 12px;
"
>
<img
src="https://cdn3.iconfinder.com/data/icons/feather-5/24/star-16.png"
alt="disability"
style="vertical-align: middle"
/>
<span>Demo text</span>
</td>
<td> </td>
<td
style="
border-radius: 100px;
padding: 4px 8px;
background-color: #f5f5f6;
color: #3c4447;
font-weight: 700;
font-size: 12px;
"
>
<img
src="https://cdn3.iconfinder.com/data/icons/feather-5/24/star-16.png"
alt="disability"
style="vertical-align: middle"
/>
<span>Demo text</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
这是它在 Outlook 中的样子：
评论