嵌套 Table 宽度 - Outlook 电子邮件

Question

我创建了一个电子邮件模板，该模板在 Windows（2016 年、2019 年）的 Outlook 桌面上呈现不正确。

整个布局是一个 table，电子邮件的不同部分占据一行 (<tr>)。

我有两个嵌套的 table，每个都有自己的 <tr>，标记完全相同。当我在 Litmus 上测试时，第二个 table 比第一个窄。

电子邮件的呈现方式：

标记：

<!DOCTYPE html>
<html lang="">
  <style>

    body {
      padding: 20px;
      font-family: Arial, Helvetica, sans-serif;
    }

    p {
      margin: 0;
    }

    center {
      padding: 20px;
      background-color: lightyellow;
      border: .1px solid gray;
    }

    center p {
      margin: 5px 0;
    }

    .red {
      color: red;
    }

    .align-center {
      text-align: center;
    }

    .align-end {
      text-align: end;
    }

    .dataTableContainer {
      width: 100%;
      text-align: left;
    }

    .dataTable {
      width: 100%;
      font-size: 14px;
      border-collapse: collapse;
      border: 0.5px solid gray;
    }

    .dataTable th, .dataTable td {
      text-align: left;
      border: 0.1px solid gray;
      padding: 8px 5px;
    }

    .dataTable tr {
      font-size: 14px;
      mso-line-height-rule: exactly;
      line-height: 90%;
    }

    .dataTable tr:nth-of-type(even) {
      background-color: #f2f2f2;
    }

    .dataTable thead tr th {
      border-bottom: 2px solid gray;
    }

    .dataTable thead tr {
      background-color: #f2f2f2;

    }

    .footerCell {
      text-align: center;
    }

    .brand {
      font-size: 12px;
      letter-spacing: 5px;
    }

    .main_brand {
      font-size: 18px;
      font-weight: bold;
      font-style: italic;
      letter-spacing: 1.8px;
    }

    .main_brand span {
      font-size: 15px;
      font-weight: initial;
    }
  </style>

  <body>
    <table width="100%">
      <tr width="100%">
        <td>
          <p>Dear Customer,</p>
        </td>
      </tr>
      <tr width="100%" align="center">
        <td height="13" valign="middle" style="margin: 0; font-size: 0px; line-height: 0px;">&nbsp;</td>
      </tr>
      <tr width="100%" align="center">
        <td>
          <center>
            <p class="red">
              <b>YOU HAVE ACCOUNTS WHICH ARE PAST DUE</b>
            </p> 
            
            <p>The below orders are scheduled to ship in the next few days and are</p>
            
            <p class="red">
              <b>AT RISK DUE TO CUSTOMER PAST DUE BALANCE</b>
            </p> 
            
            <p>
              In order to avoid delays, please collect payment ASAP. These orders will not be released until payment is received
            </p>
            
            <p>
              Click the link below to view the customer statement
            </p>
          </center>
        </td>
      </tr>
      <tr width="100%" align="center">
        <td height="13" valign="middle" style="margin: 0; font-size: 0px; line-height: 0px;">&nbsp;</td>
      </tr>
      <tr width="100%" align="center">
        <td class='dataTableContainer'>
          <table cellpadding="0" cellspacing="0" class="dataTable" style="width:100%;">
            <thead>
              <tr>
                <th><b>Order #</b></th>
                <th><b>Status</b></th>
                <th><b>Customer Name</b></th>
                <th><b>Req Ship Date</b></th>
                <th><b>Account Due</b></th>
                <th><b>Account Past Due</b></th>
                <th><b>Statement URL</b></th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><a href="" target="_blank">141926275</a></td>
                <td>Partially Shipped</td>
                <td>Adam Smith</td>
                <td>2021-10-22</td>
                <td class="align-end">1.56</td>
                <td class="align-end">1.57</td>
                <td><a href="" target="_blank">View Statement</a></td>
              </tr>
              <tr>
                <td><a href=" target="_blank">141926275</a></td>
                <td>Partially Shipped</td>
                <td>Adam Smith</td>
                <td>2021-10-22</td>
                <td class="align-end">1.56</td>
                <td class="align-end">1.57</td>
                <td><a href="" target="_blank">View Statement</a></td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
      <tr width="100%" align="center">
        <td height="13" valign="middle" style="margin: 0; font-size: 0px; line-height: 0px;">&nbsp;</td>
      </tr>
      <tr width="100%" align="center">
        <td class='dataTableContainer'>
          <table cellpadding="0" cellspacing="0" class="dataTable" style="width:100%;">
            <thead>
              <tr>
                <th><b>Order #</b></th>
                <th><b>Status</b></th>
                <th><b>Customer Name</b></th>
                <th><b>Req Ship Date</b></th>
                <th><b>Account Due</b></th>
                <th><b>Account Past Due</b></th>
                <th><b>Statement URL</b></th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><a href="" target="_blank">141926275</a></td>
                <td>Partially Shipped</td>
                <td>Adam Smith</td>
                <td>2021-10-22</td>
                <td class="align-end">1.56</td>
                <td class="align-end">1.57</td>
                <td><a href="" target="_blank">View Statement</a></td>
              </tr>
              <tr>
                <td><a href="" target="_blank">141926275</a></td>
                <td>Partially Shipped</td>
                <td>Adam Smith</td>
                <td>2021-10-22</td>
                <td class="align-end">1.56</td>
                <td class="align-end">1.57</td>
                <td><a href="" target="_blank">View Statement</a></td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>

Answer 1

通过反复试验，我找到了CSS的罪魁祸首。

    body {
      padding: 20px;
    }

body 上的

padding 导致第二个 table 比第一个窄。用 margin 替换 padding 就成功了。

我仍然不知道为什么 padding 会引起麻烦。

嵌套 Table 宽度 - Outlook 电子邮件

Nested Table Width - Outlook Email

email

outlook

html-table