对于一个电子邮件报告，我已经创建了一个HTML模板。这个模板是用Jinja 2填充6Pandas Dataframe 。
所以，我的HTML是由6个表组成的。我想显示这些表为3行x 2表。对于每一行的表应该并排显示。
我和其他收件人的问题是，当我们试图回复这种电子邮件（使用Outlook），电子邮件的格式发生了巨大的变化，（i）列布局不再存在，表格显示一个在另一个下，（ii）每个表格自动调整大小，以适应整个宽度。
此外，一些收件人不仅在回复此电子邮件时，而且在收到报告时都会尝试此问题。
我怀疑我的样式属性和display:flex有问题（我对这个完全陌生）。
我如何在任何情况下（发送电子邮件和回复/转发时）保持表并排？
HTML模板
<!DOCTYPE html>
<html>
<body>
<div class="row">
<div class="column">
<h2 class="title">{{contacts_left_title}}</h2>
{{Contacts_monthly_mp}}
</div>
<div class="column">
<h2 class="title">{{contacts_right_title}}</h2>
{{Contacts_weekly_mp}}
</div>
</div>
<br>
<div class="row">
<div class="column">
{{Contacts_monthly}}
</div>
<div class="column">
{{Contacts_weekly}}
</div>
</div>
<br>
<div class="row">
<div class="column">
{{Contacts_monthly_2}}
</div>
<div class="column">
{{Contacts_weekly_2}}
</div>
</div>
</body>
</html>应用样式
<style>
body {
font-family: Calibri;
font-size: 12pt;
}
p {
font-size: 11pt;
padding-left: 12px;
line-height: 1.5;
}
.Table_Style {
border-collapse: collapse;
margin: 5px;
margin-bottom: 20px;
border: 1px solid;
}
.Table_Style td, th {
padding: 4px;
border: 1px solid silver;
}
.Table_Style thead th {
background-color: #4682B4;
color: #ffffff;
}
.Table_Style tbody th {
width: 25%;
text-align: left;
}
.Table_Style tbody td {
width: 19%;
text-align: center;
}
.Table_Style caption {
font-size: 9pt;
padding: 10px;
font-style: bold;
color: #666;
text-align: right;
letter-spacing: 1px;
}
.row {
display: flex;
margin-left: 5px;
}
.column {
padding: auto;
margin-left: 5px;
margin-right: 15px;
}
.column ul{
font-size: 8pt;
padding-left: 20px;
}
.column h4{
margin: 0;
padding-left: 10px;
}
.box, hr, .column, .row, .Table_Style, .Brand_Style {
width: 100%;
}
</style>
1条答案
按热度按时间jjjwad0x1#
引用excellent article的话：
依靠表格-而不仅仅是数据。
HTML电子邮件最重要的一条准则是CSS布局根本不起作用。主要的电子邮件客户端要么根本不提供支持，要么以无数令人沮丧的不同方式对其进行破坏。
使用CSS而不是表格是Web标准战争的战斗口号，但是编写HTML电子邮件意味着举起白色和屈服。除非你正在构建一个非常简单的电子邮件，或者你的所有受众都在使用更现代的电子邮件阅读工具，否则就回到那些包罗万象的table标签。
因此，如果你坚持要构建一个漂亮的HTML电子邮件，你的代码需要在整个布局中使用表格。
不过，我会认真考虑一个不同的解决方案。在Web服务器上以HTML文件的形式生成报告，并通过电子邮件向收件人发送指向该报告的链接，或者以PDF格式生成报告，并将其附加到电子邮件中，怎么样？