电子邮件中的html并排表在Outlook 2007及更高版本中强制使用
Outlook破坏了我的html电子邮件，这是我第一次遇到挫折 我有一个640像素宽的容器表。其中有两个320px表，一个左对齐，一个右对齐。 它们在所有电子邮件客户端中并排出现，但Word引擎Outlook（2007年及以后）除外 这是重要的部分。我有代码，使包含表成为320像素宽时，在手机上查看。这将迫使两个表彼此重叠。 这完全符合手机的计划 但是，Outlook在桌面上渲染左对齐的表格，然后在其下方渲染左下方但仍与右对齐的右侧表格，从而在左侧表格下方和右侧表格上方创建一个大间隙电子邮件中的html并排表在Outlook 2007及更高版本中强制使用,outlook,html-table,alignment,html-email,Outlook,Html Table,Alignment,Html Email,Outlook破坏了我的html电子邮件，这是我第一次遇到挫折 我有一个640像素宽的容器表。其中有两个320px表，一个左对齐，一个右对齐。 它们在所有电子邮件客户端中并排出现，但Word引擎Outlook（2007年及以后）除外 这是重要的部分。我有代码，使包含表成为320像素宽时，在手机上查看。这将迫使两个表彼此重叠。 这完全符合手机的计划 但是，Outlook在桌面上渲染左对齐的表格，然后在其下方渲染左下方但仍与右对齐的右侧表格，从而在左侧表格下方和右侧表格上方创建一个大间隙 <!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
img
{display:block;}
a
{text-decoration:none;}
a:hover
{text-decoration: underline !important;}
td.contentblock p {
color:#FFFFFF;
font-size:16px;
font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
margin-top:0;
margin-bottom:12px;
padding-top:0;
padding-bottom:0;
font-weight:normal;
}
td.contentblock p a {
color:#e45808;
text-decoration:none;
}
.heading {
font-size:24px;
font-weight:bold;
}
@media only screen and (max-device-width: 480px) {
table[class="table"], td[class="cell"] {
width: 320px !important;
}
td[class="footershow"] {
width: 320px !important;
}
table[class="hide"], img[class="hide"], td[class="hide"], br[class="hide"], div[class="hide"] {
display: none !important;
}
img[class="divider"] {
height: 1px !important;
}
img[id="header"] {
width: 320px !important;
height: 69px !important;
}
img[id="main"] {
width: 320px !important;
height: 45px !important;
}
img[id="footer"] {
width: 320px !important;
height: 43px !important;
}
p[class="reminder"] {
font-size: 11px !important;
}
span[class="secondary"] {
line-height: 20px !important;
margin-bottom: 15px !important;
font-size: 13px !important;
}
}
</style>
</head>
<body bgcolor="#e4e4e4" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" style="-webkit-font-smoothing: antialiased;width:100% !important;background:#e4e4e4;-webkit-text-size-adjust:none;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#EEEEEE">
<tr>
<td bgcolor="#EEEEEE" width="100%">
<table width="640" cellpadding="0" cellspacing="0" border="0" align="center" class="table">
<tr>
<td width="640" class="cell" style="color:#FFF;">
<table class="table" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#cc6600" class="contentblock cell" style="color:#FFFFFF;font-size:16px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<table width="320" bgcolor="#cc6600" cellpadding="0" cellspacing="0" border="0" align="left">
<tr>
<td>
<a href="#" target="_blank" title="#" style="text-decoration:none;color:#FFF;"><img src="http://www.example.com/image_01.png" alt="#" width="320" height="167" border="0" style="display:block;" /></a>
</td>
</tr>
</table>
<table width="320" bgcolor="#cc6600" cellpadding="0" cellspacing="0" border="0" align="right">
<tr>
<td>
<a href="#" target="_blank" title="#" style="text-decoration:none;color:#FFF;"><img src="http://www.example.com/image_02.png" alt="#" width="320" height="167" border="0" style="display:block;" /></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
img
{显示：块；}
A.
{文本装饰：无；}
a:悬停
{文本装饰：下划线！重要；}
td.contentblock p{
颜色：#FFFFFF；
字体大小：16px；
字体系列：'Helvetica Neue'，Helvetica，Arial，无衬线；
边际上限：0；
边缘底部：12px；
填充顶部：0；
填充底部：0；
字体大小：正常；
}
td.contentblock pa{
颜色：#e45808；
文字装饰：无；
}
.标题{
字体大小：24px；
字体大小：粗体；
}
@仅介质屏幕和（最大设备宽度：480px）{
table[class=“table”]，td[class=“cell”]{
宽度：320px！重要；
}
td[class=“footershow”]{
宽度：320px！重要；
}
表[class=“hide”]、img[class=“hide”]、td[class=“hide”]、br[class=“hide”]、div[class=“hide”]{
显示：无！重要；
}
img[class=“divider”]{
高度：1px！重要；
}
img[id=“header”]{
宽度：320px！重要；
高度：69px！重要；
}
img[id=“main”]{
宽度：320px！重要；
高度：45px！重要；
}
img[id=“footer”]{
宽度：320px！重要；
高度：43px！重要；
}
p[class=“提醒”]{
字体大小：11px！重要；
}
span[class=“secondary”]{
线高：20px！重要；
边缘底部：15px！重要；
字体大小：13px！重要；
}
}
如果有人能帮我找到一种方法，让我的两张桌子在Outlook中并排放置，但在移动电话中仍然让它们在另一张桌子下重新对齐，我将非常感激。快速的答案是将内部桌子的宽度缩小几个像素。目前，Outlook在它们之间添加了几个像素，导致320+（两个像素）+320>640
但更准确的方法是添加
mso table lspacemso table rspace<!--[if (gte mso 9)|(IE)]>
<table width="640" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="50%">
<![endif]-->
(Left table goes here)
<!--[if (gte mso 9)|(IE)]>
</td>
<td width="50%">
<![endif]-->
(Right table goes here)
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
（左表在这里）
（右表在这里）
（gte mso 9）（IE）