我的表格在发送后立即对齐（时事通讯的 HTML 电子邮件）
Posted
技术标签:
【中文标题】我的表格在发送后立即对齐（时事通讯的 HTML 电子邮件）【英文标题】：My Table alignment became right after it sent (HTML Email for newsletter) 【发布时间】：2022-01-19 08:45:16 【问题描述】：我的表格对齐有问题。 （html 时事通讯电子邮件） 当我在 Dreamweaver 中打开它时，一切看起来都很正常，在我的浏览器上打开它并打开它或将它作为文本附加到我的 Outlook 邮件中。 （在我发送之前） 但是当我通过将其作为文本附加到电子邮件中发送时，收件人会看到表格的对齐方式正确。 （我实际上把所有东西都放在里面，用 text-align 左对齐）我是这个 HTML 的新手。
这是我在代码 sn-p 中的电子邮件代码：
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td valign="center" align="center" class="p30-15" style="padding: 20px 0px 30px 0px;">
<table 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 border="0" cellspacing="0" cellpadding="0" dir="rtl" style="direction: rtl;">
<tr>
<th class="column-top" dir="ltr" align="left" style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; text-align: left; vertical-align:top;">
<table 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 & 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" 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" 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" 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 是的，我其实也不知道为什么桌子分开哈哈
【参考方案1】：
试试这个。此 HTML 结构将解决您的问题。
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td valign="center" align="center" class="p30-15" style="padding: 20px 0px 30px 0px;">
<table 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 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" 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" 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" align="left" style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; text-align: left; vertical-align:top;">
<table 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 & 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>【讨论】：
以上是关于我的表格在发送后立即对齐（时事通讯的 HTML 电子邮件）的主要内容，如果未能解决你的问题，请参考以下文章