【发布时间】：2013-11-29 06:33:27
【问题描述】：
我正在设计一个响应式电子邮件，它在一个表格内有 3 个平行的表格标签。每个表在它们各自的 td 中都有一些数据。如果任何表有任何类型的数据，我希望数据在任何情况下都是 valign="top"。但是我在这里遇到了奇怪的问题，我在第一个表中有大量数据，这会导致另一个表的对齐被破坏，如果第一个表的数据很长，下一个表的数据不会保持对齐。我在这里附上了我的标记以及 Outlook 电子邮件在 Outlook 上的外观的屏幕截图。我正在使用 Outlook 2010。
Image how it looks in outlook : http://i40.tinypic.com/ioqc60.jpg
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Email</title>
<meta name="viewport" content="width=device-width">
</head>
<body bgcolor="#FFFFFF">
<style type="text/css">
/****** EMAIL CLIENT BUG FIXES - BEST NOT TO CHANGE THESE ********/
/* Forces Hotmail to display emails at full width. */
.ExternalClass {width:100%;}
.ReadMsgBody {width: 100%;}
/* Forces Hotmail to display normal line spacing. */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height:100%;}
/* Prevents Webkit and Windows Mobile platforms from changing default font sizes. */
body {-webkit-text-size-adjust:none; -ms-text-size-adjust:none;}
/* Resets all body margins and padding to "0" for good measure. */
body {margin:0; padding:0;}
/* Resolves webkit padding issue. */
table {border-spacing:0;}
/* Resolves the Outlook 2007, 2010, and Gmail td padding issue. */
table td {border-collapse:collapse;}
/****** END BUG FIXES ********/
/* Reset Styles */
table, p, h1, h2, h3, h4, h5, h6, strong, a, font { font-family: Futura, "Trebuchet MS", Arial, sans-serif!important; }
h1, h2, h3, h4, h5, h6 {line-height:100%;}
p {margin:0; padding:0;}
body {
margin: 0;
padding: 0;
color: #666666;
}
h3, h4, h5 {
letter-spacing: -1px;
}
a img {border: none!important;}
.container {
display: block!important;
width: 100%!important;
max-width: 600px!important;
margin: 0 auto!important;
padding: 5px!important;
clear: both!important;
font-family: Futura, "Trebuchet MS", Arial, sans-serif;
}
.content {
margin: 20px 0;
}
table {
padding: 0 5px;
}
td {
font-size: 11px;
}
tr {
border-bottom: 1px solid #ccc !important;
}
.middle {
}
.bbb-blue {
color: #2D368C;
}
.header .bbb-hdr-logo {
width: 40%;
}
.header .bbb-hdr-message {
width: 50%;
}
.header h3 {
margin: 0 0 12px 0;
font-size: 40px;
}
.header p {
margin: 0;
}
img.remove {
float: left;
}
img.rating {
margin-left: 10px;
}
.cta img.seeDetails {
margin: 0 4px 0 0;
}
.copy {
font-size: 16px;
}
.price span {
font-size: 20px;
}
.price sup {
font-size: 10px;
}
.main .content .upc {
font-size: 11px;
}
.main .content .product-img {
width: 20%;
}
.main .content .product-details {
width: 70%;
}
.main .content .my-table-item {
width: 50%;
}
.footer .content td a {
color: #2D368C;
font-size: 16px;
font-weight: bold;
text-decoration: none;
}
@media (max-width: 580px) {
.header .content,
.header .content table,
.main .content,
.main .content table {
width: 100%!important;
}
.main .content .section-hdr h3{
font-size: 16px!important;
}
.middle {
border-left: none;
border-right: none;
}
}
</style>
<!-- Template Wrapper -->
<table class="container" border="0" cellpadding="0" cellspacing="0" width="590" align="center">
<!-- content section -->
<tr>
<td class="main" style="border-top:3px solid #F5F5F5;border-bottom:3px solid #F5F5F5;padding-top:10px;padding-bottom:10px;margin-bottom:20px;">
<table class="content" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="padding:5px;" align="left">
<table width="180" align="left" class="content left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" valign="top">
<div class="section-wrapper" width="100%" border="0">
<table width="100%" border="0" cellpadding="5" cellspacing="0">
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<table width="180" align="left" class="content middle" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" valign="top">
<div class="section-wrapper" width="100%" border="0">
<table width="100%" border="0" cellpadding="5" cellspacing="0">
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<table width="180" align="left" class="content right" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" valign="top">
<div class="section-wrapper" width="100%" border="0">
<table width="100%" border="0" cellpadding="5" cellspacing="0">
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine... <br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
<tr>
<td style="width:40px"><img src="http://i.imgur.com/ebpt2cl.gif"></td>
<td style="font-size:10px;">Dyson Mini-Turbine...<br>$69.99</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
【问题讨论】：
-
你为什么首先使用三个表？如果您愿意使用一个表格，您可以使用
colspan强制它们全部对齐到列的顶部。 -
正如我所提到的，我正在设计响应式布局。所以我希望每个表格在小屏幕上 100% 对齐。这意味着在移动设备上，每张桌子一个接一个地垂直排列。
标签： html email outlook html-email