表格邮件布局样式在 Outlook 中未正确显示
问题描述 投票：0回答：1
我正在使用表格创建邮件布局，但我很难在 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>
这是我在创建布局时在投放后看到的内容：
这是 Gmail 中的样子：
但展望如下：
如何才能让outlook获取样式并像gmail一样显示，可能吗？谢谢！
1个回答
0
投票
投票
我找到了解决方案，只需在里面添加另一个表来分隔第一个和第二个块。这是改进后的代码：
<!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 中的样子：
最新问题
- 如何在同一地址上托管 Web API 和 MVC 应用程序
- 在 Azure 上托管 API 的最佳方式，可以服务巨大的负载（每秒 100K 请求）
- 如何将 json 的字段与另一个 json 中相同字段的值映射
- Pinia 状态在对象中使用时失去反应性？
- Azure Graph API - 按 CreatedDateTime 的用户
- 如何在Github CI工作流程中缓存Cargo包？
- 使用 Google Apps 脚本从 Google 表单自动填写 Google 文档
- 通过编辑器脚本修改ScriptableObject
- 使用T-SQL，如何检索去年销售的最后平均净价？
- 为什么回溯在第一个问题中给出错误结果而在第二个问题中给出正确结果。 Leetcode 分别为#322 #78
- 无法创建 Cloud Composer 2 - GKE Pod 失败并缺少 IAM 角色
- 如何在 Blazor Web 程序集中集成 themeforest 主题？
- Tensorflow 在 TF 2.16.1 中找不到 GPU
- Plotly Choropleth 地图未正确显示 GeoJSON 数据 - 可能的几何或映射问题
- 如何在 Bluespec BSV (Bluespec SystemVerilog) 中显式声明和定义时钟和复位
- 从模板化转换函数返回可选值
- 是否可以合并两个自动热键脚本？
- 错误 TS2345：“事件”类型的参数不可分配给“字符串”类型的参数
- TextBox 和 SetFocus VBA EXCEL
- 如何使用 Graphviz 和 Haskell 正确地在记录之间绘制边缘
© www.soinside.com 2019 - 2024. All rights reserved.