Электронные письма в формате HTML — Outlook 2010 — проблема с выравниванием таблицы

У меня есть две таблицы, выровненные по левому краю на 30% каждая, так что, когда они реагируют на изменение на 100%, они складываются друг под другом.

Проблема в том, что, как показано на скриншоте ниже, у второго есть зазор вверху, и я понятия не имею, почему?

Мой фрагмент кода здесь

<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 – снимок экрана


mailchimp html-email outlook-2010
person Martin    schedule 10.03.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Не похоже на тот же код на скриншотах, отсутствуют цвета фона и шрифты. В любом случае, я думаю, вам нужен призрачный столбец между таблицами для выравнивания, попробуйте код ниже:

<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>

При необходимости вы можете изменить ширину призрачного столбца. дайте мне знать, как вы идете.

person Syfer    schedule 10.03.2017