Question

我有两个表格左对齐，每个表格各占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 - Screenshot

Answer 1

看起来与截图中的代码相同，缺少背景颜色和字体。无论哪种方式，我认为您需要在表格之间进行对齐，请尝试下面的代码：

＆＃13;

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

＆＃13;

如果需要，您可以更改ghost列的宽度。让我知道你怎么走。

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

1 个答案: