Essential responsive email code: fluid table widths

We're back again with some more HTML and CSS code goodies straight from the NewZapp email designers' ever-so-trendy dispatch-style satchel. This time we deal with an email's very skeleton, the elements truly critical to any HTML email layout: tables.

No sniggering at the back please, web designers.

So, on wider screens these have nice and stable fixed widths, all perfectly normal. But once opened on any the plethora of mobile devices that come with sadly much narrower screens, these same tables must be made to transform and flow sinuously down their slimline LCD visages.

How is it done, pray tell? Wonder no more as we present to you ...

... fabulously fluid table widths.

Essential responsive email code: fluid table widths

A brief note about how CSS styles are declared here

Although this code will have been inserted into a Media query in order to limit its effects to narrower screens only (see this article) some upstart email readers (*koff* Yahoo! *koff*) will still ignore this and attempt to render all of the CSS regardless. This generally produces an email layout most displeasing to the eye ...

There is, happily, a neat workaround. It turns out that using the attribute selector method of creating a  class or id is ignored by those very email readers, yet still recognised by all the mobile devices that need to use the styles they contain. Happy days!

You will also notice the use of a tilde '~' (otherwise known as a squiggly', can't think why) alongside the normal equals '=' symbol. This effectively means 'containing' - that is, the CSS looks for any of the specified elements that contain that particular class.

The upshot is you are able to use multiple classes on each element in the email rather than being restricted to one, e.g.
<td class="rspnsv-tbl scale-me text-to-14px" > ... </td>

And why the !important declaration?

This has been found to be useful in overriding any proprietary stylesheet rules that email readers may try to impose upon your beautiful code. And they will, make no mistake ...

Can't get enough wisdom? Why not peruse the companion blogs in this series:

 The magical Media query

Fiendishly fluid content alignment

Undeniably useful element modifiers