我正在设计一个响应式电子邮件，其中有一个表格内并列有3个表格标签。每个表在各自的td中都有一些数据。如果任何表有任何类型的数据，我希望数据在每种情况下都是valign =“top”。但是我在这里遇到了奇怪的问题，我在第一个表中有大量的数据导致打破另一个表的对齐，在第一个表有冗长数据的情况下，下一个表的数据不保持对齐。我在这里附上我的标记以及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>
答案 0 :(得分：2)
将valign="top"放在包含3个父表的<td>上。您目前只在包含section-wrapper divs的表格单元格中使用它。
<!-- 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" valign="top"><!-- < PUT IT HERE! -->
<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">
答案 1 :(得分：0)
之前我遇到过同样的问题，它的前景不能很好地适应3x 33.33％。 我不得不将它们全部制成32％以使它们并排放置。就像前景一样，在tds周围形成一个很大的隐形边界