Html 电子邮件 - Outlook 2010 - 表格对齐问题答案

【问题标题】：Html Emails - Outlook 2010 - Table Align IssueHtml 电子邮件 - Outlook 2010 - 表格对齐问题
【发布时间】：2023-03-24 00:12:01
【问题描述】：

我有两个表格以 30% 左对齐，因此当它响应时将更改为 100% 并堆叠在彼此下方。

问题是根据下面的屏幕截图，第二个顶部有一个间隙，我不知道为什么？

我的sn-p代码在这里

<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td align="center" valign="top" class="fullWidth" style="padding-left:30px;padding-right:30px;">
        <!-- CONTENT TABLE // -->
        <table align="left" border="0" cellpadding="0" cellspacing="0" width="30%" class="tableFullWidth">
                <tr>
                    <td valign="top" class="topTen">                                                                                                        <p><span>1</span> FIRST AND LAST NAME</p>
                                                                            <hr>
                                                                            <p><span>2</span> FIRST AND LAST NAME</p>
                                                                            <hr>
                                                                            <p><span>3</span> FIRST AND LAST NAME</p>
                                                                            <hr>
                                                                            <p><span>4</span> FIRST AND LAST NAME</p>
                                                                            <hr>
                                                                            <p><span>5</span> FIRST AND LAST NAME</p>
                                                                            <hr>
                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                                <!-- // CONTENT TABLE -->
                                                                <!-- CONTENT TABLE // -->
                                                                <table align="left" border="0" cellpadding="0" cellspacing="0" width="30%" class="tableFullWidth">
                                                                    <tr>
                                                                        <td valign="top" class="topTen">
                                                                            <p><span>6</span> FIRST AND LAST NAME</p>
                                                                            <hr>
                                                                            <p><span>7</span> FIRST AND LAST NAME</p>
                                                                            <hr>
                                                                            <p><span>8</span> FIRST AND LAST NAME</p>
                                                                            <hr>
                                                                            <p><span>9</span> FIRST AND LAST NAME</p>
                                                                            <hr>
                                                                            <p><span>10</span> FIRST AND LAST NAME</p>
                                                                            <hr>
                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                                <!-- // CONTENT TABLE -->
                                                            </td>
                                                        </tr>
                                                    </table>

Outlook 2010 - Screenshot

【问题讨论】：

标签： html-email mailchimp outlook-2010

【解决方案1】：

与屏幕截图中的代码不同，缺少背景颜色和字体。无论哪种方式，我认为您需要在表格之间设置一个幽灵列来对齐，请尝试以下代码：

<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td align="center" valign="top" class="fullWidth" style="padding-left:30px;padding-right:30px;">
        <!-- CONTENT TABLE // -->
        <table align="left" border="0" cellpadding="0" cellspacing="0" width="30%" class="tableFullWidth">
                <tr>
<td valign="top" class="topTen">                                                                                                        	<p><span>6</span> FIRST AND LAST NAME</p>
				<hr>
				<p><span>7</span> FIRST AND LAST NAME</p>
				<hr>
				<p><span>8</span> FIRST AND LAST NAME</p>
				<hr>
				<p><span>9</span> FIRST AND LAST NAME</p>
				<hr>
				<p><span>10</span> FIRST AND LAST NAME</p>
				<hr>
			</td>
		</tr>
	</table>
	<!-- // CONTENT TABLE -->
	<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="50%">
<![endif]-->

	<!-- CONTENT TABLE // -->
<table align="left" border="0" cellpadding="0" cellspacing="0" width="30%" class="tableFullWidth">
		<tr>
			<td valign="top" class="topTen">
				<p><span>6</span> FIRST AND LAST NAME</p>
				<hr>
				<p><span>7</span> FIRST AND LAST NAME</p>
				<hr>
				<p><span>8</span> FIRST AND LAST NAME</p>
				<hr>
				<p><span>9</span> FIRST AND LAST NAME</p>
				<hr>
				<p><span>10</span> FIRST AND LAST NAME</p>
				<hr>
			</td>
		</tr>
	</table>
	<!-- // CONTENT TABLE -->
</td>
</tr>
</table>

如果需要，您可以更改幻影列的宽度。告诉我你的情况。

【讨论】：