Question

我需要发送包含HTML表的电子邮件。我创建了一个包含3列和几行的表格。在台式机上查看时，电子邮件看起来还不错，表格看起来还不错。但是，在Apple iPhone中查看电子邮件时，表格无法正确显示。出了什么问题，我该如何解决？

<table border="1" cellpadding="1" cellspacing="1" style="width: 327px; height: 2px; border-width: medium; border-style: none;">
<tbody>
    <tr>
        <td style="width: 126.567px;"><strong>Date</strong></td>
        <td style="width: 75.5167px;"><strong>Marks</strong></td>
        <td style="width: 106.917px;"><strong>Score</strong></td>
    </tr>
    <tr>
        <td style="width: 126.567px;">July 2018</td>
        <td style="width: 75.5167px;">231</td>
        <td style="width: 106.917px;">517</td>
    </tr>
    <tr>
        <td style="width: 126.567px;">August 2018</td>
        <td style="width: 75.5167px;">-124</td>
        <td style="width: 106.917px;">238</td>
    </tr>
    <tr>
        <td style="width: 126.567px;">September 2018</td>
        <td style="width: 75.5167px;">336</td>
        <td style="width: 106.917px;">-833</td>
    </tr>
    <tr>
        <td style="width: 126.567px;">October 2018</td>
        <td style="width: 75.5167px;">589</td>
        <td style="width: 106.917px;">296</td>
    </tr>
    <tr>
        <td style="width: 126.567px;">November 2018</td>
        <td style="width: 75.5167px;">288</td>
        <td style="width: 106.917px;">1879</td>
    </tr>
    <tr>
        <td style="width: 126.567px;">December 2018</td>
        <td style="width: 75.5167px;">277</td>
        <td style="width: 106.917px;">908</td>
    </tr>
</tbody> 
</table>

Answer 1

像素值是相当固定的宽度，具体取决于应用程序的分辨率和Device Pixel Ratio。

因此，您可以使用百分比值px，而不是使用像素（%）值，并且（可能）向该对象添加一个min-width限制器（和/或max-width:）。表整体。

示例：

<table border="1" cellpadding="1" cellspacing="1" style="width: 100%; max-width: 327px; height: 2px; border-width: medium; border-style: none;">
<tbody>
    <tr>
        <td style="width: 41%;"><strong>Date</strong></td>
        <td style="width: 24%;"><strong>Marks</strong></td>
        <td style="width: 34%;"><strong>Score</strong></td>
    </tr>

明智的做法是在word-wrap: break-word内容中添加<td>，以使表的大小不会（可能）失真。

电子邮件是使用HTML正确呈现的雷区。

电子邮件中的自适应HTML表

1 个答案:

示例：