0

So, I'm trying to make a email template with a table.

I have the following table right under the body tag

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

And it looks just the way I want in Outlook (desktop, mobile portrait, mobile landscape). And it looks fine in gmail on the desktop and in mobile landscape.

But if you open it in gmail on mobile portrait, the td's are pretty bunched up on the left hand side.

Anyone know why? If it matters, I'm testing in the gmail app on a Nexus 5 phone.

user2747609
  • 331
  • 1
  • 4
  • 22

1 Answers1

0

Try this:

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

Not sure if text-indent works, but padding does. If you want a max-width fluid layout, wrap it inside this fluid template example

Community
  • 1
  • 1
John
  • 11,985
  • 3
  • 45
  • 60