我的表格在发送后立即对齐（时事通讯的 HTML 电子邮件）答案

【问题标题】：My Table alignment became right after it sent (HTML Email for newsletter)我的表格在发送后立即对齐（时事通讯的 HTML 电子邮件）
【发布时间】：2022-01-19 08:45:16
【问题描述】：

我的表格对齐有问题。（HTML 时事通讯电子邮件）当我在 Dreamweaver 中打开它时，一切看起来都很正常，在我的浏览器上打开它并打开它或将它作为文本附加到我的 Outlook 邮件中。（在我发送之前）但是当我通过将其作为文本附加到电子邮件中发送时，收件人会看到表格的对齐方式正确。（我实际上把所有东西都放在里面，用 text-align 左对齐）我是这个 HTML 的新手。

这是我在代码 sn-p 中的电子邮件代码：

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
  <tr>
    <td valign="center" align="center" class="p30-15" style="padding: 20px 0px 30px 0px;">
      <table width="650" border="0" cellspacing="0" cellpadding="0" class="mobile-shell">
      <tr>
         <td class="text-center pt40" style="color:#777777; font-family:'Spartan Medium'; font-size:20px; line-height:30px; text-align:left; vertical-align: top; padding-top: 10px; padding-bottom: 10px;"><strong>Deployment Detail :</strong></td>
      </tr>
        <tr>
          <td class="td" style="width:650px; min-width:650px; font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal;">
            <table width="100%" border="0" cellspacing="0" cellpadding="0" dir="rtl" style="direction: rtl;">
              <tr>
                <th class="column-top"  dir="ltr" width="100%" align="left" style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; text-align: left; vertical-align:top;">
                  <table width="100%" border="1" cellspacing="0" cellpadding="5">
                    <tr>
                      <td class="text pb20" style="color:#777777; font-family:'Spartan SemiBold'; font-size:12px; line-height:32px; text-align:left; align-content: center; align-self: center; font-weight:normal; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Maintenance and Deployment</p></td>
                    </tr>
                    <tr>
                      <td class="text pb20" style="color:#777777; font-family:'Spartan SemiBold'; font-size:12px; line-height:32px; text-align:left; font-weight:bold; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Saturday, 25th December 2021 01:00 AM UTC (UK Time)</p></td>
                    </tr>
                    <tr>
                      <td class="text pb20" style="color:#777777; font-family:'Spartan SemiBold'; font-size:12px; line-height:32px; text-align:left; font-weight:bold; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Friday, 31st December 2021 13:00 PM UTC (UK Time)</p></td>
                    </tr>
                    <tr>
                      <td class="text pb20" style="color:#777777; font-family:'Spartan SemiBold'; font-size:12px; line-height:32px; text-align:left; font-weight:normal; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Release 2.62.00</p></td>
                    </tr>
                    <tr>
                      <td class="text pb20" style="color:#777777; font-family:'Spartan SemiBold'; font-size:12px; line-height:32px; text-align:left; font-weight:normal; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Medium</p></td>
                    </tr>
                    <tr>
                      <td class="text pb20" style="color:#777777; font-family:'Spartan SemiBold'; font-size:12px; line-height:32px; text-align:left; font-weight:normal; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">All Users</p></td>
                    </tr>
                    <tr>
                      <td class="text pb20" style="color:#777777; font-family:'Spartan SemiBold'; font-size:11px; line-height:31px; text-align:left; vertical-align: top; font-weight:normal; padding-left: 10px; padding-bottom: 5px;"><p style="text-align: left; padding: 0px; margin: 0px;">1.) System reset feature (every 90 days)<br />
                        2.) Data Renewal from 2013 to 2019 for inactive data<br />
                        3.) monthly maintenance<br />
                        <strong>The Apps will not be accessible</strong> during the mentioned date &amp; time. Kindly ensure you logged out from system to avoid data loss.</p></td>
                    </tr>
                    <tr>
                      <td class="text pb20" style="color:#777777; font-family:'Spartan SemiBold'; font-size:12px; line-height:32px; text-align:left; font-weight:normal; padding-left: 10px; padding-bottom: 5px;" ><p style="text-align: left; padding: 0px; margin: 0px;">Helpdesk@classy.com</p></td>
                    </tr>
                    <tr>
                      <td class="text pb20" style="color:#777777; font-family:'Spartan SemiBold'; font-size:12px; line-height:32px; text-align:left; font-weight:normal; padding-left: 10px; padding-bottom: 5px;" ><p style="text-align: left; padding: 0px; margin: 0px;">#12345678</p></td>
                    </tr>
                  </table>
                </th>
                <!--<th class="column-empty" dir="ltr" width="60" style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; vertical-align:top;"></th>-->
                <th class="column" dir="ltr" style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal;">
                  <table align="left" width="200" border="1" cellspacing="0" cellpadding="5">
                    <tr>
                      <td class="text pb20" style="color:#000000; font-family:'Spartan SemiBold'; font-size:14px; line-height:32px; text-align:left; font-weight:bold; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Event Type</p></td>
                    </tr>
                    <tr>
                      <td class="text pb20" style="color:#0000000; font-family:'Spartan SemiBold'; font-size:14px; line-height:32px; text-align:left; font-weight: bold; padding-bottom: 5px; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Start Date & Time</p></td>
                    </tr>
                    <tr>
                      <td class="text pb20" style="color:#000000; font-family:'Spartan SemiBold'; font-size:14px; line-height:32px; text-align:left; font-weight:bold; padding-bottom:5px; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">End Date & Time</p></td>
                    </tr>
                    <tr>
                      <td class="text pb20" style="color:#000000; font-family:'Spartan SemiBold'; font-size:14px; line-height:32px; text-align:left; font-weight:bold; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Release Version</p></td>
                    </tr>
                    <tr>
                      <td class="text pb20" style="color:#000000; font-family:'Spartan SemiBold'; font-size:14px; line-height:32px; text-align:left; font-weight:bold; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Impact</p></td>
                    </tr>
                    <tr>
                      <td class="text pb20" style="color:#0000000; font-family:'Spartan SemiBold'; font-size:14px; line-height:32px; text-align:left; font-weight: bold; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Affected Users</p></td>
                    </tr>
                    <tr>
                      <td class="text pb20" height="155" style="color:#000000; font-family:'Spartan SemiBold'; font-size:14px; line-height:32px; text-align:left; font-weight:bold; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Remarks</p></td>
                    </tr>
                    <tr>
                      <td class="text pb20" style="color:#0000000; font-family:'Spartan SemiBold'; font-size:14px; line-height:32px; text-align:left; font-weight: bold; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Contact</p></td>
                    </tr>
                    <tr>
                      <td class="text pb20" style="color:#0000000; font-family:'Spartan SemiBold'; font-size:14px; line-height:32px; text-align:left; font-weight: bold; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Reference Number</p></td>
                    </tr>
                  </table>
                </th>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

这是用户收到邮件时的电子邮件（表格部分）：

如果你们能帮助我或为我的问题提供任何解决方案，我真的很感激。谢谢。

最好的问候， MST

【问题讨论】：

这个类text pb20的属性是什么
删除这个dir="ltr"
我不太清楚它为什么会这样做；但我有点困惑，为什么左列与右列是分开的？
让我尝试删除 Lalji 建议的目录
@AndrewCorrigan 是的，我其实也不知道为什么桌子分开哈哈

标签： javascript html css alignment html-email

【解决方案1】：

试试这个。此 HTML 结构将解决您的问题。

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
  <tr>
    <td valign="center" align="center" class="p30-15" style="padding: 20px 0px 30px 0px;">
      <table width="650" border="0" cellspacing="0" cellpadding="0" class="mobile-shell">
      <tr>
         <td class="text-center pt40" style="color:#777777; font-family:'Spartan Medium'; font-size:20px; line-height:30px; text-align:left; vertical-align: top; padding-top: 10px; padding-bottom: 10px;"><strong>Deployment Detail :</strong></td>
      </tr>
        <tr>
          <td class="td" style="width:650px; min-width:650px; font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal;">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <th class="column" style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal;">
                  <table align="left" width="200" border="1" cellspacing="0" cellpadding="5">
                    <tr>
                      <td class="text pb20" style="color:#000000; font-family:'Spartan SemiBold'; font-size:14px; line-height:32px; text-align:left; font-weight:bold; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Event Type</p></td>
                    </tr>
                    <tr>
                      <td class="text pb20" style="color:#0000000; font-family:'Spartan SemiBold'; font-size:14px; line-height:32px; text-align:left; font-weight: bold; padding-bottom: 5px; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Start Date & Time</p></td>
                    </tr>
                    <tr>
                      <td class="text pb20" style="color:#000000; font-family:'Spartan SemiBold'; font-size:14px; line-height:32px; text-align:left; font-weight:bold; padding-bottom:5px; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">End Date & Time</p></td>
                    </tr>
                    <tr>
                      <td class="text pb20" style="color:#000000; font-family:'Spartan SemiBold'; font-size:14px; line-height:32px; text-align:left; font-weight:bold; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Release Version</p></td>
                    </tr>
                    <tr>
                      <td class="text pb20" style="color:#000000; font-family:'Spartan SemiBold'; font-size:14px; line-height:32px; text-align:left; font-weight:bold; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Impact</p></td>
                    </tr>
                    <tr>
                      <td class="text pb20" style="color:#0000000; font-family:'Spartan SemiBold'; font-size:14px; line-height:32px; text-align:left; font-weight: bold; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Affected Users</p></td>
                    </tr>
                    <tr>
                      <td class="text pb20" height="155" style="color:#000000; font-family:'Spartan SemiBold'; font-size:14px; line-height:32px; text-align:left; font-weight:bold; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Remarks</p></td>
                    </tr>
                    <tr>
                      <td class="text pb20" style="color:#0000000; font-family:'Spartan SemiBold'; font-size:14px; line-height:32px; text-align:left; font-weight: bold; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Contact</p></td>
                    </tr>
                    <tr>
                      <td class="text pb20" style="color:#0000000; font-family:'Spartan SemiBold'; font-size:14px; line-height:32px; text-align:left; font-weight: bold; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Reference Number</p></td>
                    </tr>
                  </table>
                </th>
                <th class="column-top" width="100%" align="left" style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; text-align: left; vertical-align:top;">
                  <table width="100%" border="1" cellspacing="0" cellpadding="5">
                    <tr>
                      <td class="text pb20" style="color:#777777; font-family:'Spartan SemiBold'; font-size:12px; line-height:32px; text-align:left; align-content: center; align-self: center; font-weight:normal; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Maintenance and Deployment</p></td>
                    </tr>
                    <tr>
                      <td class="text pb20" style="color:#777777; font-family:'Spartan SemiBold'; font-size:12px; line-height:32px; text-align:left; font-weight:bold; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Saturday, 25th December 2021 01:00 AM UTC (UK Time)</p></td>
                    </tr>
                    <tr>
                      <td class="text pb20" style="color:#777777; font-family:'Spartan SemiBold'; font-size:12px; line-height:32px; text-align:left; font-weight:bold; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Friday, 31st December 2021 13:00 PM UTC (UK Time)</p></td>
                    </tr>
                    <tr>
                      <td class="text pb20" style="color:#777777; font-family:'Spartan SemiBold'; font-size:12px; line-height:32px; text-align:left; font-weight:normal; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Release 2.62.00</p></td>
                    </tr>
                    <tr>
                      <td class="text pb20" style="color:#777777; font-family:'Spartan SemiBold'; font-size:12px; line-height:32px; text-align:left; font-weight:normal; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">Medium</p></td>
                    </tr>
                    <tr>
                      <td class="text pb20" style="color:#777777; font-family:'Spartan SemiBold'; font-size:12px; line-height:32px; text-align:left; font-weight:normal; padding-left: 10px;"><p style="text-align: left; padding: 0px; margin: 0px;">All Users</p></td>
                    </tr>
                    <tr>
                      <td class="text pb20" style="color:#777777; font-family:'Spartan SemiBold'; font-size:11px; line-height:31px; text-align:left; vertical-align: top; font-weight:normal; padding-left: 10px; padding-bottom: 5px;"><p style="text-align: left; padding: 0px; margin: 0px;">1.) System reset feature (every 90 days)<br />
                        2.) Data Renewal from 2013 to 2019 for inactive data<br />
                        3.) monthly maintenance<br />
                        <strong>The Apps will not be accessible</strong> during the mentioned date &amp; time. Kindly ensure you logged out from system to avoid data loss.</p></td>
                    </tr>
                    <tr>
                      <td class="text pb20" style="color:#777777; font-family:'Spartan SemiBold'; font-size:12px; line-height:32px; text-align:left; font-weight:normal; padding-left: 10px; padding-bottom: 5px;" ><p style="text-align: left; padding: 0px; margin: 0px;">Helpdesk@classy.com</p></td>
                    </tr>
                    <tr>
                      <td class="text pb20" style="color:#777777; font-family:'Spartan SemiBold'; font-size:12px; line-height:32px; text-align:left; font-weight:normal; padding-left: 10px; padding-bottom: 5px;" ><p style="text-align: left; padding: 0px; margin: 0px;">#12345678</p></td>
                    </tr>
                  </table>
                </th>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

【讨论】：