最小宽度嵌套表格HTML电子邮件

Question

在Gmail和Apple的邮件客户端中代码可以正常工作，但Outlook让我抓狂。

<table cellpadding="0" width="600" align="center" valign="top" style="padding-bottom:10"            style="min-width:600px;">
<tr>
<td>    
<span style="font-family:Tahoma; background-color:#81DAF5; font-size:35px;"><i>Text</i>      </span>
</td>
<td>
<table align="right">
<tr>
<td align="right">
<span style="background-color:#ffffff; font-size:14px; font-family:Verdana, Geneva,   Arial, Helvetica, sans-serif"><i>Text</i></span>
</td>
</tr>
<tr>
<td align="right">
<span style="background-color:#ffffff; font-size:14px; font-family:Verdana, Geneva, Arial, Helvetica, sans-serif"><i>Text</i></span>
</td>
</tr>
</table>
</td>
</tr>
</table>

我希望整个表格的最小宽度为600px，但在Outlook中，当我缩小窗口大小时，文本开始换行。

- Brian

Answer 1

Outlook不支持min-width（最小宽度）。

您有一个跨越表格单元格的span和table。请为每个部分使用不同的单元格。以下是一个基本示例：

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center">
      <!-- Center Panel -->
      <table width="600" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="400">
            <span style="font-family:Tahoma; background-color:#81DAF5; font-size:35px;">
              <i>Text</i>
            </span>
          </td>
          <td width="200" style="font-size:14px; font-family:Verdana, Geneva, Arial, Helvetica, sans-serif">
            <!-- Nested to stack two rows, could also use br's or rowspans if preferred -->
            <table width="100%" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td align="right">
                  <i>Text</i>
                </td>
              </tr>
              <tr>
                <td align="right">
                  <i>Text</i>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

- John

---

谢谢！奇怪的是，我在现有表格上重新创建了您提供的表格，但现在两个表格都遵循最小宽度为600。 - Brian

Answer 2

您可以将“td”放入列中（可能在“thead”行中，但任何“tr”都可以），并填充尽可能多的nbsp以保持最小宽度。 nbsp是不可断空格，这意味着（在大多数情况下）不会被折叠或允许换行。等宽字体最适合此操作。

<table>
    <thead>
        <td style="font-family: Consolas, monaco, monospace;">&nbsp;&nbsp;&nbsp;MinimumWidthHolder&nbsp;&nbsp;&nbsp;</td>
    </thead>
    <tbody>
        <tr>
            <td>your text</td>
        </tr>
    </tbody>
</table>

- codebliss

Answer 3

将内部表格的宽度设置为100%。

<table width="100%" align="right">

- Diodeus - James MacFarlane

Answer 4

对我有帮助的是设置内部和外部表格的最小宽度（以及最大宽度，以确保）。Diodeus建议的“在内部表格上使用100％”对我根本没有用。

- WoodrowShigeru

Answer 5

如果您需要在HTML电子邮件中为Outlook设置表格的最小宽度，只需创建一个高度为1且宽度等于所需最小宽度的tr和td即可。

<!-- Outlook min-width hack -->
    <!--[if (mso)|(IE)]>
    <tr>
        <td bgcolor="#FFFFFF" style="background-color: #FFFFF; padding: 0; margin:0;">
            <table cellspacing="0" cellpadding="0" width="360" height="1" style="margin:0; padding: 0;">
                <tr style="margin:0; padding: 0;"><td height="1" width="360"></td></tr>
            </table>
        </td>
    </tr>
    <![endif]-->

- Kamion