Although this question has been asked previously, the solutions provided did not solve my issue.
I am trying to set the width of the <td> element to 70%, but when I insert an image it is affecting the widths of received emails in Outlook (I use MS Outlook Pro 2013). I don't want to use pixels as a unit because it doesn't work well across all screen widths. One suggestion was to use <div> instead of <td>, but I've heard that <div> isn't supported consistently. Can you please advise on how to proceed?
HTML
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="template_header" style="background-color: #fee7f3; color: #ffffff; border-radius: 3px 3px 0 0;">
<tbody>
<tr>
<td style="width: 70%;"><img src="/example.jpg" style="width: auto; height: auto; float: left; box-sizing: border-box;"></td>
<td style="width: 30%;"><h1>Example txt</h1></td>
</tr>
</tbody>
</table>
My Attempts
- I enclosed the
<img>with a<p>tag - I applied
display: inline-blockto<td> - I included attributes
widthandheightfor both<td>and<img> - I added
width: 100%andheight: autoto<img>