Outlook 2013 中的 tr、td 宽度答案

【问题标题】：tr, td widths in Outlook 2013Outlook 2013 中的 tr、td 宽度
【发布时间】：2017-06-14 17:51:25
【问题描述】：

我在 SO 上搜索的所有解决方案都无法帮助我解决问题。我无法让我的 tr 和 td 的宽度在 Outlook 电子邮件客户端中工作。这是一个示例：

    <table width="600" style="box-sizing: border-box; max-width: 600px; margin: 0px auto; width: 600px; height: 150px; background-color: #ffffff; table-layout: fixed; padding: 20px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" border="0" cellpadding="0" cellspacing="0">
  <tbody width="600" style="box-sizing: border-box; width: 100%;">
    <!--Header Row-->
    <tr width="600" style="box-sizing: border-box; width: 100%;">
      <td width="600" style="box-sizing: border-box; display: inline-block; width: 100%; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"><a href="http://example.org" style="box-sizing: border-box; font-family: 'Arial', sans-serif; text-decoration: none;"> <img src="http://example.img-us3.com/BarberJ/header-image-560.png" width="100%" height="auto" alt="header-image.png" title="header-image.png" style="box-sizing: border-box;"></a></td>
    </tr>
    <!--End Header Row--><!--Hero Image Row-->
    <tr style="box-sizing: border-box; width: 100%;">
      <td style="box-sizing: border-box; display: inline-block; width: 100%; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"><img src="http://example.img-us3.com/BarberJ/hero-image-560.png" width="100%" height="auto" alt="hero-image.png" title="hero-image.png" style="box-sizing: border-box;"></td>
    </tr>
    <!--End Hero Image--><!--Main Heading/CTA-->
    <tr width="600" style="box-sizing: border-box; width: 100%;">
      <td width="75%" style="box-sizing: border-box; width: 75%; display: inline-block; padding: 0; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
        <h1 style="box-sizing: border-box; font-family: 'Arial', sans-serif; font-size: 26px; margin-bottom: 0px; font-weight: 800; color: #425563; margin-top: 4px;">Knitting New Knockers</h1>
        <p style="box-sizing: border-box; font-family: 'Arial', sans-serif; font-size: 12px; margin-top: 4px; font-weight: 100; color: #425563;">How a knitting Group is putting the 'ta-da' back in ta-tas.</p>
      </td>
      <td width="25%" style="box-sizing: border-box; display: inline-block; padding: 0; width: 25%; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
        <table border="0" cellspacing="0" cellpadding="0" style="box-sizing: border-box; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
          <tbody>
            <tr style="box-sizing: border-box;">
              <td bgcolor="#9F1C3B" style="box-sizing: border-box; display: inline-block; padding: 5px 15px; -webkit-border-radius: 30px; border-radius: 30px; color: #fff; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" align="center"><a target="_blank" style="box-sizing: border-box; font-family: 'Arial', sans-serif; text-decoration: none; font-size: 16px; color: white;">Discover How</a>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
</tbody>
</table>

我尝试为所有 td 和 tr 添加固定宽度。我试过删除任何百分比。 Outlook 中没有任何工作...我的问题在哪里？

【问题讨论】：

标签： html email outlook html-email email-client

【解决方案1】：

在第三行 <tr> 中，您添加了第二个 <td>，宽度为 25%。

获得更清晰输出的方法是将表格分成两张表格，一张用于前两行图像，一张用于表格的其余两行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
  <table width="600" style="box-sizing: border-box; max-width: 600px; margin: 0px auto; width: 600px; height: 150px; background-color: #ffffff; table-layout: fixed; padding: 20px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" border="1" cellpadding="0" cellspacing="0">
    <tbody width="600" style="box-sizing: border-box; width: 100%;">
    <!--Header Row-->
    <tr width="600" style="box-sizing: border-box; width: 100%;">
      <td width="600" style="box-sizing: border-box; display: inline-block; width: 100%; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"><a href="http://example.org" style="box-sizing: border-box; font-family: 'Arial', sans-serif; text-decoration: none;"> <img src="http://example.img-us3.com/BarberJ/header-image-560.png" width="100%" height="auto" alt="header-image.png" title="header-image.png" style="box-sizing: border-box;"></a></td>
   </tr>
   <!--End Header Row--><!--Hero Image Row-->
   <tr style="box-sizing: border-box; width: 100%;">
     <td style="box-sizing: border-box; display: inline-block; width: 100%; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"><img src="http://example.img-us3.com/BarberJ/hero-image-560.png" width="100%" height="auto" alt="hero-image.png" title="hero-image.png" style="box-sizing: border-box;"></td>
   </tr>
  <!--End Hero Image--><!--Main Heading/CTA-->
</table>
<table width="600" style="box-sizing: border-box; max-width: 600px; margin: 0px auto; width: 600px; height: 150px; background-color: #ffffff; table-layout: fixed; padding: 20px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" border="1" cellpadding="0" cellspacing="0">
<tbody width="600" style="box-sizing: border-box; width: 100%;">
<tr width="600" style="box-sizing: border-box; width: 100%;">
  <td width="75%" style="box-sizing: border-box; width: 75%; display: inline-block; padding: 0; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
    <h1 style="box-sizing: border-box; font-family: 'Arial', sans-serif; font-size: 26px; margin-bottom: 0px; font-weight: 800; color: #425563; margin-top: 4px;">Knitting New Knockers</h1>
    <p style="box-sizing: border-box; font-family: 'Arial', sans-serif; font-size: 12px; margin-top: 4px; font-weight: 100; color: #425563;">How a knitting Group is putting the 'ta-da' back in ta-tas.</p>
  </td>
  <td width="25%" style="box-sizing: border-box; display: inline-block; padding: 0; width: 25%; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
    <table border="0" cellspacing="0" cellpadding="0" style="box-sizing: border-box; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
      <tbody>
        <tr style="box-sizing: border-box;">
          <td bgcolor="#9F1C3B" style="box-sizing: border-box; display: inline-block; padding: 5px 15px; -webkit-border-radius: 30px; border-radius: 30px; color: #fff; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" align="center"><a target="_blank" style="box-sizing: border-box; font-family: 'Arial', sans-serif; text-decoration: none; font-size: 16px; color: white;">Discover How</a>
            </td>
          </tr>
        </tbody>
      </table>
    </td>
  </tr>
</tbody>
</table>
</body>
</html>

这是修复后您的表格在 Outlook 2016 中的外观：

祝你好运。

【讨论】：

【解决方案2】：

可以这么说，你错过了 td。您较大的两个图像位于单个 td 上，最底行位于两个 td 上。这就是你的表格没有对齐的原因。也尽量不要使用 box-sizing，旧的浏览器不会读取它，它只是代码占用文件大小。所有电子邮件开发人员都知道几千字节在电子邮件中的重要性。

<table width="600" style="box-sizing: border-box; max-width: 600px; margin: 0px auto; width: 600px; height: 150px; background-color: #ffffff; table-layout: fixed; padding: 20px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" border="0" cellpadding="0" cellspacing="0">
<tbody width="600" style="box-sizing: border-box; width: 100%;">
  <tr style="box-sizing: border-box; width: 100%;">
    <td style="box-sizing: border-box; display: inline-block; width: 100%; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"><table width="600" style="box-sizing: border-box; max-width: 600px; margin: 0px auto; width: 600px; height: 150px; background-color: #ffffff; table-layout: fixed; padding: 20px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" border="0" cellpadding="0" cellspacing="0">
      <tbody width="600" style="box-sizing: border-box; width: 100%;">
        <!--Header Row-->
        <tr width="600" style="box-sizing: border-box; width: 100%;">
          <td width="600" style="box-sizing: border-box; display: inline-block; width: 100%; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"><a href="http://example.org" style="box-sizing: border-box; font-family: 'Arial', sans-serif; text-decoration: none;"> <img src="http://example.img-us3.com/BarberJ/header-image-560.png" width="100%" height="auto" alt="header-image.png" title="header-image.png" style="box-sizing: border-box;"></a></td>
        </tr>
        <!--End Header Row-->
        <!--Hero Image Row-->
        <tr style="box-sizing: border-box; width: 100%;">
          <td style="box-sizing: border-box; display: inline-block; width: 100%; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"><img src="http://example.img-us3.com/BarberJ/hero-image-560.png" width="100%" height="auto" alt="hero-image.png" title="hero-image.png" style="box-sizing: border-box;"></td>
        </tr>
        <!--End Hero Image-->
        <!--Main Heading/CTA-->
      </tbody>
    </table></td>
  </tr>
</tbody>
</table>
<table width="600" border="0" cellpadding="0" cellspacing="0" style="box-sizing: border-box; max-width: 600px; margin: 0px auto; width: 600px; height: 150px; background-color: #ffffff; table-layout: fixed; padding: 20px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
  <tbody width="600" style="box-sizing: border-box; width: 100%;">
    <!--Header Row-->
    <!--End Header Row-->
    <!--Hero Image Row-->
    <!--End Hero Image-->
    <!--Main Heading/CTA-->
    <tr width="600" style="box-sizing: border-box; width: 100%;">
      <td width="75%" style="box-sizing: border-box; width: 75%; display: inline-block; padding: 0; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"><h1 style="box-sizing: border-box; font-family: 'Arial', sans-serif; font-size: 26px; margin-bottom: 0px; font-weight: 800; color: #425563; margin-top: 4px;">Knitting New Knockers</h1>
        <p style="box-sizing: border-box; font-family: 'Arial', sans-serif; font-size: 12px; margin-top: 4px; font-weight: 100; color: #425563;">How a knitting Group is putting the 'ta-da' back in ta-tas.</p></td>
      <td width="25%" style="box-sizing: border-box; display: inline-block; padding: 0; width: 25%; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"><table border="0" cellspacing="0" cellpadding="0" style="box-sizing: border-box; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
        <tbody>
          <tr style="box-sizing: border-box;">
            <td bgcolor="#9F1C3B" style="box-sizing: border-box; display: inline-block; padding: 5px 15px; -webkit-border-radius: 30px; border-radius: 30px; color: #fff; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" align="center"><a target="_blank" style="box-sizing: border-box; font-family: 'Arial', sans-serif; text-decoration: none; font-size: 16px; color: white;">Discover How</a></td>
          </tr>
        </tbody>
      </table></td>
    </tr>
  </tbody>
</table>

希望这就是你想要的答案。

【讨论】：