Data table in responsive email

Question

I would like to make email responsive, but I have some problems with data table (no layout table). The deal is make 2 tables : one for desktop and another for mobile. Until there, no problem I can hide/show the table depending on the screen size. But I have a problem when displaying mobile table.

Take a look at this codepen ...

When the mobile table is displayed I would like the 2nd column has an "auto-size" in order to have the text on one line.

Do you have any ideas ? I can't find the correct css ...

Thank.

Answer 1

The 2nd column for the mobile layout needs a min-width (e.g. 100px). I.e.

However, this table no longer works in today's email clients, if it ever worked. I have tested it using Litmus and Outlook (any), Gmail, iPhones - all have critical faults.

A much better way is to use one table - easier for maintenance as well - and you can either keep it in the old-fashioned datatable manner, or use card UI design to massively improve its readability, flexibility, and accessibility.

The essential features of the single datatable are to use a hybrid structure for the email, three columns, and repeat the header in each column. Then hide the headers for desktops (or show them for mobiles).

Like so:

Read the linked article for full details.

The essential features of the card UI design is to gather all the information for one row together, and display it on multiple lines, using hierarchy and gestalt laws to aid readability.

For example:

Answer 2

If you want to keep text in 2nd column in one line, maybe check this:

Keep a line of text as a single line - wrap the whole line or none at all

To adjust the width of this column, try playing with: width: auto.

Next time consider using responsive Twitter-Bootstrap framework, bro.