Alexandre Lesage
Alexandre Lesage

Reputation: 33

Data table in responsive email

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.

Upvotes: 0

Views: 2343

Answers (2)

Nathan
Nathan

Reputation: 5269

The 2nd column for the mobile layout needs a min-width (e.g. 100px). I.e. for .table.container table.row.mobile-show td under the @media query

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:

Three column structure

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:

Card layout of a Service Invoice datatable

Upvotes: 1

mtszkw
mtszkw

Reputation: 2783

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.

Upvotes: 0

Related Questions