我正在学习响应式电子邮件设计，但在将三个表格放入 td 时遇到了麻烦。我可以将两个表放入 td 中，并分别将它们左右对齐，它们的布局就很好。但是当我放入第三个表时，即使确保三个表的总宽度明显小于容器表的宽度，他们也不会证明。
我试过设置 td align="justify"然后将每个表左对齐:
<tr>
<td align="justify" valign="top" class="icons" bgcolor="#ffffff" style="padding: 0px 0px 0px 0px; color: #ffffff; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size:14px; line-height:24px;">
<table class="gear" width="180" height="185" align="left" border="0" bgcolor="#00adef" cellpadding="0" cellspacing="0">
<tr>
<td class="gear" align="center" valign="middle" style="padding: 5px 5px 5px 5px;">
CLASSIC SOHO OFFICE. STATE OF THE ART INFRASTRUCTURE.<br/><br/><img src="http://www.michaelcoleman.net/files/cushman/20140918/images/gear.png" alt="One Soho Square" width="60" height="60" border="0px"></img>
</td>
</tr>
</table>
<table class="arrow" width="180" height="185" align="left" border="0" bgcolor="#44c9f6" cellpadding="0" cellspacing="0">
<tr>
<td class="arrow" align="center" valign="middle" style="padding: 5px 5px 5px 5px;">
CEILING UP TO 13'6", NATURAL LIGHT, OVERSIZE TERRACES<br/><br/><img src="http://www.michaelcoleman.net/files/cushman/20140918/images/arrow.png" alt="One Soho Square" width="60" height="60" border="0px"></img>
</td>
</tr>
</table>
<table class="divide" width="180" height="185" align="left" border="0" bgcolor="#00b9f2" cellpadding="0" cellspacing="0">
<tr>
<td class="divide" align="center" valign="middle" style="padding: 5px 5px 5px 5px;">
SPACES FROM<br/>11,000 TO 130,000 RSF<br/><br/><img src="http://www.michaelcoleman.net/files/cushman/20140918/images/divide.png" alt="One Soho Square" width="60" height="60" border="0px"></img>
</td>
</tr>
</table>
<br style="clear:both;">
</td>
</tr>
我试过排除 td 对齐属性并简单地将每个表分别向左、居中和右对齐:
<tr>
<td valign="top" class="icons" bgcolor="#ffffff" style="padding: 0px 0px 0px 0px; color: #ffffff; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size:14px; line-height:24px;">
<table class="gear" width="180" height="185" align="left" border="0" bgcolor="#00adef" cellpadding="0" cellspacing="0">
<tr>
<td class="gear" align="center" valign="middle" style="padding: 5px 5px 5px 5px;">
CLASSIC SOHO OFFICE. STATE OF THE ART INFRASTRUCTURE.<br/><br/><img src="http://www.michaelcoleman.net/files/cushman/20140918/images/gear.png" alt="One Soho Square" width="60" height="60" border="0px"></img>
</td>
</tr>
</table>
<table class="arrow" width="180" height="185" align="center" border="0" bgcolor="#44c9f6" cellpadding="0" cellspacing="0">
<tr>
<td class="arrow" align="center" valign="middle" style="padding: 5px 5px 5px 5px;">
CEILING UP TO 13'6", NATURAL LIGHT, OVERSIZE TERRACES<br/><br/><img src="http://www.michaelcoleman.net/files/cushman/20140918/images/arrow.png" alt="One Soho Square" width="60" height="60" border="0px"></img>
</td>
</tr>
</table>
<table class="divide" width="180" height="185" align="right" border="0" bgcolor="#00b9f2" cellpadding="0" cellspacing="0">
<tr>
<td class="divide" align="center" valign="middle" style="padding: 5px 5px 5px 5px;">
SPACES FROM<br/>11,000 TO 130,000 RSF<br/><br/><img src="http://www.michaelcoleman.net/files/cushman/20140918/images/divide.png" alt="One Soho Square" width="60" height="60" border="0px"></img>
</td>
</tr>
</table>
<br style="clear:both;">
</td>
</tr>
我什么都做不了。如果有任何帮助，我将不胜感激!
这是我正在处理的内容的链接:http://michaelcoleman.net/files/cushman/20140918/OSS20140918.html
-MC
最佳答案
我想通了!我添加了一个包含三列的主表，并将每个较小的表放入一列中。我还得回去把它全部清理干净，但它运行正常。现在看看我是否可以让它响应。
<tr>
<td align="justify" valign="top" class="icons" bgcolor="#ffffff" style="padding: 0px 0px 0px 0px; color: #ffffff; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size:14px; line-height:24px;">
<table width="100%" border="0">
<tr>
<td>
<table class="gear" align="left" width="185" height="185" border="0" bgcolor="#00adef" cellpadding="0" cellspacing="0">
<tr>
<td class="gear" align="center" valign="middle" style="padding: 5px 5px 5px 5px;">
CLASSIC SOHO OFFICE. STATE OF THE ART INFRASTRUCTURE.<br/><br/><img src="http://www.michaelcoleman.net/files/cushman/20140918/images/gear.png" alt="One Soho Square" width="60" height="60" border="0px"></img>
</td>
</tr>
</table>
</td>
<td>
<table class="arrow" align="center" width="185" height="185" border="0" bgcolor="#44c9f6" cellpadding="0" cellspacing="0">
<tr>
<td class="arrow" align="center" valign="middle" style="padding: 5px 5px 5px 5px;">
CEILING UP TO 13'6", NATURAL LIGHT, OVERSIZE TERRACES<br/><br/><img src="http://www.michaelcoleman.net/files/cushman/20140918/images/arrow.png" alt="One Soho Square" width="60" height="60" border="0px"></img>
</td>
</tr>
</table>
</td>
<td>
<table class="divide" align="right" width="185" height="185" border="0" bgcolor="#00b9f2" cellpadding="0" cellspacing="0">
<tr>
<td class="divide" align="center" valign="middle" style="padding: 5px 5px 5px 5px;">
SPACES FROM<br/>11,000 TO 130,000 RSF<br/><br/><img src="http://www.michaelcoleman.net/files/cushman/20140918/images/divide.png" alt="One Soho Square" width="60" height="60" border="0px"></img>
</td>
</tr>
</table>
</td>
</tr>
</table>
关于responsive-design - 响应电子邮件 : Distribute three tables within a TD，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25914359/