CODEWITHSUNDEEP
htmlcssmobilehtml-emailemail
Alexandre Lesage
Alexandre Lesage

Reputation: 33

How to make table data responsive in email

I would like to know what is the best way for making table data responsive in email ?

I use Ink by Zurb for making my responsive email and I would like to insert it a table data (like shopping card table). But I would like it responsive. My idea is to set 2 tables, one for desktop and another for mobile and hide either one or other depending on the size of the screen. I have found many solutions for hiding something in email. But no one work in every webmail.

Do you have any idea ?

Thanks.

Upvotes: 3

Views: 2907

Answers (2)

Gortonington
Gortonington

Reputation: 3587

Based on your codepen you have a couple choices.

The first one is a simple solution, similar to what you already have on there. The second is a lot more difficult and complex - but will remove the need to have 2 separate data tables.

1.) Do a mobile table and a desktop table. Have the Mobile table display by default and use percentages with Max-Width to contain for gmail client. Then have media queries at your desktop break point (e.g. usually around 600px) that change it to display:none !important, etc. to hide the table on desktop. You then by default hide the desktop version. In gmail, using display:none doesnt work, in order to get it to work you need to use display:none !important, which makes inlining it pretty much useless. See a list below taken from here on css to use to hide in gmail. You then have the media query also change the desktop table to display, effectively replacing it. This does mean that on gmail web client, that the mobile table will display.

display: none;

font-size: 0;

max-height: 0;

line-height: 0;

padding: 0; (optional)

mso-hide: all; /* hide elements in Outlook 2007-2013 */ (optional)

2.) Your second option is to build a bunch of block tables that act as each row and the tds will stack on mobile with hidden tds for headers that display on desktop or mobile, etc. This can get very complex and very tenuous as a tiny change can break the whole thing. It would likely give you much better display across all clients, but in my opinion the first option is a much more efficient and sustainable.

Upvotes: 1

Gallo
Gallo

Reputation: 43

I would suggest you take a look at this neat article: display table explanation

Else you can try to use the display: flex property

Upvotes: 1

Related Questions