0

I have the following code in a html email:

<table style="margin: 32px 0; border: 0; border-spacing: 0; border-collapse: collapse;">
    <tr>
        <td style="width: 50%; vertical-align: top; padding: 0; border: 0; line-height: 1; background: red;">Invoice Number</td>
        <td style="width: 50%; vertical-align: top; padding: 0; border: 0; line-height: 1; background: red;"></td>
    </tr>
    <tr>
        <td style="width: 50%; vertical-align: top; padding: 0; border: 0; line-height: 1; background: red;">Tax Point</td>
        <td style="width: 50%; vertical-align: top; padding: 0; border: 0; line-height: 1; background: red;">30/11/2017 11:48:32</td>
    </tr>
    <tr>
        <td style="width: 50%; vertical-align: top; padding: 0; border: 0; line-height: 1; background: red;">Payer ID</td>
        <td style="width: 50%; vertical-align: top; padding: 0; border: 0; line-height: 1; background: red;">Senior Internet</td>
    </tr>
</table>

<table class="invoice-items">
    <tr>
        <th style="font-family: sans-serif; padding: 10px;">Description</th>
        <th style="font-family: sans-serif; padding: 10px;">Item Amount</th>
        <th style="font-family: sans-serif; padding: 10px;">Quantity</th>
        <th style="font-family: sans-serif; padding: 10px;">VAT Amount</th>
        <th style="font-family: sans-serif; padding: 10px;">Line Total</th>
    </tr>
    <tr>
        <td style="padding: 10px;">Charity/ public sector</td>
        <td style="padding: 10px;">360.0000</td>
        <td style="padding: 10px;">1</td>
        <td style="padding: 10px;">72.0000</td>
        <td style="padding: 10px;">360.0000</td>
    </tr>
    <tr>
        <td colspan="3" class="empty">&nbsp;</td>
        <td class="no-border">Total</td>
        <td class="green no-border">£432.0000</td>
    </tr>
</table>

However, I am having an issue with the cell height of the first table coming out far too large. I've tried setting padding, borders, line heights, I just can't get the red cells to be the height of the text within them.enter image description here

Sam Willis
  • 4,001
  • 7
  • 40
  • 59
  • you have to add your css because your code working properly this way, the problem mostly from the css – Mhd Alaa Alhaj Nov 30 '17 at 12:08
  • dont post here template file with placeholders like `{{DueDate}}` but paste here rendered html,, – Kresimir Pendic Nov 30 '17 at 12:12
  • If you inspect the element can you see anything overriding the inline styles? Eg are the styles of the email client adding padding to the table cells? Is the table margin somehow being added to the cells (as it isn't being added to the table) – Pete Nov 30 '17 at 12:12
  • @pete I can't inspect the email as it is in outlook, I will try getting one into gmail and see what I can find, thanks. – Sam Willis Nov 30 '17 at 12:41
  • Have you tried setting `line-height` in plain `px` instead? – Justinas Nov 30 '17 at 12:42
  • Just tried setting line-height in px, no difference. It all appears fine in gmail, just seems to having issues in Outlook 2016 – Sam Willis Nov 30 '17 at 13:15

1 Answers1

0

It's something about the CSS you're using or the email client, your code is working properly here, checkout how it is rendered in plain HTML file:

How it is rendered in plain HTML

Check out this answer for testing HTML templates: https://stackoverflow.com/a/1019166/4129382

cassmtnr
  • 927
  • 13
  • 26