CSS table background not working properly in Outlook

December 2, 2021

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>

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?

>Solution :

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>