0

所以，我正在尝试制作一个带有表格的电子邮件模板。

我在 body 标签下有下表

  <table style="padding-top:0px; max-width: 650px;" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">
<tbody>
  <tr>
    <td  height="10" style="width: 650px;">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tbody width="100%">
          <tr width="100%">
            <td width="2.5%">&nbsp;</td>
            <td width="22%" style="font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold;">AAAA AAAA</td>
            <td width="40%" style="text-indent: 4%; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold;">BBBB</td>
            <td width="22%" align="center" style="font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold;">CCC</td>
            <td width="13%" style="text-indent: 4.5%; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold;">DDDDD</td>
          </tr>
        </tbody>
      </table>
    </td>
  </tr>
</tbody>

它看起来正是我在 Outlook 中想要的方式（桌面、移动纵向、移动横向）。它在桌面和移动环境中的 gmail 中看起来不错。

但是，如果您在手机肖像上的 gmail 中打开它，则 td 会在左侧非常聚集。

有谁知道为什么？如果这很重要，我正在 Nexus 5 手机上的 gmail 应用程序中进行测试。

4

1 回答 1

0

尝试这个：

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="25%" style="padding-left:3%; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold;">AAAA AAAA</td>
    <td width="40%" style="padding-left: 4.5%; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold;">BBBB</td>
    <td width="22%" align="center" style="font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold;">CCC</td>
    <td width="13%" style="padding-left: 4.5%; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold;">DDDDD</td>
  </tr>
</table>

不确定是否text-indent有效，但填充可以。如果您想要最大宽度的流体布局，请将其包装在这个流体模板示例中

于 2014-04-24T16:47:23.760 回答