In The Outlooks on Windows (2007-2025, using Word's rendering engine), a left aligned table will crop the start its adjacing content, but only if the container of those elements has a background color itself.
Here's a screenshot of a minimalist test I made:
I tried playing with mso-table-lspace: 0pt; mso-table-rspace: 0pt; but that didn't fix it. The solution I ended up with (that is not really a solution as it only evades the problem) is to apply a mso-text-indent-alt:4px; to the adjacing <p>.
Here’s a full code example.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Newsletter</title>
</head>
<body style="background-color: #FAFAFA;">
<h1>The problem: a table with <code>align="left"</code> crops the start of the adjacing text</h1>
<table style="width:100%; background-color:#fff;" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td style="padding:20px;">
<table align="left" style="background-color:red" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td style="padding:0 8px">
<p style="margin:0; font:bold 13px/20px sans-serif; color: #FFFFFF">
Lorem ipsum dolor sit
</p>
</td>
</tr>
</table>
<p style="margin:0; font:bold 16px/20px sans-serif; color: #000">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit dolorum ipsum illum sunt eaque, non vero exercitationem debitis enim distinctio doloribus adipisci tempora. Inventore soluta ea enim et fuga maiores?
</p>
</td>
</tr>
</table>
<h2>Note: This only happens when the outer table has a background color</h2>
<table style="width:100%;" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td style="padding:20px;">
<table align="left" style="background-color:red" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td style="padding:0 8px">
<p style="margin:0; font:bold 13px/20px sans-serif; color: #FFFFFF">
Lorem ipsum dolor sit
</p>
</td>
</tr>
</table>
<p style="margin:0; font:bold 16px/20px sans-serif; color: #000">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit dolorum ipsum illum sunt eaque, non vero exercitationem debitis enim distinctio doloribus adipisci tempora. Inventore soluta ea enim et fuga maiores?
</p>
</td>
</tr>
</table>
<h1>A solution: <code>mso-text-indent-alt</code> on the paragraph</h1>
<table style="width:100%; background-color:#fff;" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td style="padding:20px;">
<table align="left" style="background-color:red;" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td style="padding:0 8px">
<p style="margin:0; font:bold 13px/20px sans-serif; color: #FFFFFF">
Lorem ipsum dolor sit
</p>
</td>
</tr>
</table>
<p style="margin:0; font:bold 16px/20px sans-serif; color: #000; mso-text-indent-alt:4px;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit dolorum ipsum illum sunt eaque, non vero exercitationem debitis enim distinctio doloribus adipisci tempora. Inventore soluta ea enim et fuga maiores?
</p>
</td>
</tr>
</table>
</body>
</html>
In The Outlooks on Windows (2007-2025, using Word's rendering engine), a left aligned table will crop the start its adjacing content, but only if the container of those elements has a background color itself.
Here's a screenshot of a minimalist test I made:
I tried playing with
mso-table-lspace: 0pt; mso-table-rspace: 0pt;but that didn't fix it. The solution I ended up with (that is not really a solution as it only evades the problem) is to apply amso-text-indent-alt:4px;to the adjacing<p>.Here’s a full code example.