I have a simple HTML table used in an email template:

<table id="x_formHeaderTable" style="width:100%; margin:0; padding:0; background-color:#FCE68D; border-style: solid; border-color: #000000;">
  <tbody>
    <tr>
      <td style="height:4px"></td>
    </tr>
    <tr>
      <td style="width:1%"></td>
      <td style="width:49%; text-align:left; vertical-align:top"><em>Some text in here</em></td>
      <td style="width:49%; text-align:right; vertical-align:top"><strong>Another text in here</td>
      <td style="width:1%"></td>
    </tr>
    <tr>
      <td style="height:4px"></td>
    </tr>
  </tbody>
</table>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

it displays correctly (like in the snippet preview) in every client that I have tested, except for (obviously) Outlook, where it looks like this:

What can I do to fix it?

CodePudding user response：

You can try to add a colspan property on the single two tds and a non breaking space ( ) to give them a with like so:

<table id="x_formHeaderTable" style="width:100%; margin:0; padding:0; background-color:#FCE68D; border-style: solid; border-color: #000000;">
  <tbody>
    <tr>
      <td style="height:4px" colspan="4">&nbsp;</td>
    </tr>
    <tr>
      <td style="width:1%"></td>
      <td style="width:49%; text-align:left; vertical-align:top"><em>Some text in here</em></td>
      <td style="width:49%; text-align:right; vertical-align:top"><strong>Another text in here</td>
      <td style="width:1%"></td>
    </tr>
    <tr>
      <td style="height:4px" colspan="4">&nbsp;</td>
    </tr>
  </tbody>
</table>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Just update below code,

<table id="x_formHeaderTable" style="width:100%; margin:0; padding:0; background-color:#FCE68D; border-style: solid; border-color: #000000;">
  <tbody>
    <tr>
      <td style="width:1%;height:4px;"></td>
      <td style="width:49%;"></td>
      <td style="width:49%;"></td>
      <td style="width:1%"></td>
    </tr>
    <tr>
      <td style="width:1%"></td>
      <td style="width:49%; text-align:left; vertical-align:top"><em>Some text in here</em></td>
      <td style="width:49%; text-align:right; vertical-align:top"><strong>Another text in here</strong></td>
      <td style="width:1%"></td>
    </tr>
    <tr>
      <td style="width:1%;height:4px;"></td>
      <td style="width:49%;"></td>
      <td style="width:49%;"></td>
      <td style="width:1%"></td>
    </tr>
  </tbody>
</table>