Responsive HTML table in email

Question

I need to send an email which has a HTML table. I created a table with 3 columns and couple of rows. The email when viewed in a desktop pc looks okay, the table looks fine. However when the email is viewed in a apple iphone the table does not appear properly. What is going wrong and how can I fix it?

<table border="1" cellpadding="1" cellspacing="1" style="width: 327px; height: 2px; border-width: medium; border-style: none;">
<tbody>
    <tr>
        <td style="width: 126.567px;"><strong>Date</strong></td>
        <td style="width: 75.5167px;"><strong>Marks</strong></td>
        <td style="width: 106.917px;"><strong>Score</strong></td>
    </tr>
    <tr>
        <td style="width: 126.567px;">July 2018</td>
        <td style="width: 75.5167px;">231</td>
        <td style="width: 106.917px;">517</td>
    </tr>
    <tr>
        <td style="width: 126.567px;">August 2018</td>
        <td style="width: 75.5167px;">-124</td>
        <td style="width: 106.917px;">238</td>
    </tr>
    <tr>
        <td style="width: 126.567px;">September 2018</td>
        <td style="width: 75.5167px;">336</td>
        <td style="width: 106.917px;">-833</td>
    </tr>
    <tr>
        <td style="width: 126.567px;">October 2018</td>
        <td style="width: 75.5167px;">589</td>
        <td style="width: 106.917px;">296</td>
    </tr>
    <tr>
        <td style="width: 126.567px;">November 2018</td>
        <td style="width: 75.5167px;">288</td>
        <td style="width: 106.917px;">1879</td>
    </tr>
    <tr>
        <td style="width: 126.567px;">December 2018</td>
        <td style="width: 75.5167px;">277</td>
        <td style="width: 106.917px;">908</td>
    </tr>
</tbody> 
</table>

Try not to use tbody when making email templates – Thanveer Shah Jan 24 '19 at 09:29 — Thanveer Shah, Jan 24 '19 at 09:29
Is this the whole code? – Thanveer Shah Jan 24 '19 at 09:29 — Thanveer Shah, Jan 24 '19 at 09:29
@ThanveerShah why not use ``? – Martin Jan 24 '19 at 09:34 — Martin, Jan 24 '19 at 09:34

score 0 · Answer 1 · answered Jan 24 '19 at 09:33

Pixel values are fairly fixed width, depending on application resolution, and Device Pixel Ratio.

Therefore instead of using pixel (px) values you can use percentge values % and (possibly) add a min-width limiter (and/or max-width:) to the table overall.

Example:

<table border="1" cellpadding="1" cellspacing="1" style="width: 100%; max-width: 327px; height: 2px; border-width: medium; border-style: none;">
<tbody>
    <tr>
        <td style="width: 41%;"><strong>Date</strong></td>
        <td style="width: 24%;"><strong>Marks</strong></td>
        <td style="width: 34%;"><strong>Score</strong></td>
    </tr>

It would also be wise to add a word-wrap: break-word to the <td> contents so that the table size is not (potentially) distorted.

Emails are a minefield to render correctly with HTML.

pasted into all parts of the table? @Greatchap - so that no part of the table has `px` in the `style` element? — Martin, Jan 24 '19 at 14:37
yes, no part of table has px. I am pasting in email message and using mass mail system Aweber — Greatchap, Jan 25 '19 at 17:35

Responsive HTML table in email

1 Answers1

Example: