HTML Responsive Tables

Danger Phoenix · 16 Jan 2015 at 00:50

I am trying to create a responsive email using HTML and CSS and seem to have hit a snag.

I have a container table, with two tables within in, which float. However, I want to vertically align them to the bottom of that container, irrespective of their heigh.

I set up a JSFiddle here:
http://jsfiddle.net/hirenshah/mhn3oavx/

The pink area needs to be at the bottom and not the top, but I have read that it is not possible to do whilst the tables are floating.

Any suggestions?

RoyMi6 · 16 Jan 2015 at 16:37

Hum, I was going to help but you'll need to explain more clearly what you're wanting to achieve.

If you want the "hello1" table to appear at the bottom simply put it after the "hello2" table surely?

And what container do you want to align them to the bottom of? The container on the JS fiddle webiste? or the container that you have a class for but haven't set a hight for?

http://jsfiddle.net/9tf4xg6d/ - is not what you're trying to achieve?

Danger Phoenix · 16 Jan 2015 at 16:42

Sorry for not explaining better. I would like the table which says "Table 1" in it, to be at the bottom when in the full width view. So in other words, the pink table should line up to the bottom of the yellow table.

RoyMi6 · 16 Jan 2015 at 17:00

Gotcha.

Usiung media queries when the width is 601px or above then add to .hello1

position: absolute;
bottom: 0px;

.container will need to be "position: relative" for the hello1 div to stay inside it.

http://jsfiddle.net/bdL1hbog/

The chances of this working in many email clients is not very high though

simisker · 16 Jan 2015 at 20:32

You mean something like this?

https://litmus.com/pub/fe64b90

Notes:

1. Outlook 2007/10/13 look wrong because I've used a styled div as a substitute for an image, and Outlook collapses divs. If that were an actual image, the layout would work.

2. Achieving this took all sorts of faffing with conditional MSO comments, duplicate markup, and other tricks I've learned in 10+ years of building HTML emails...

3. ... so seriously consider rethinking your design...

4. ... and don't use floats or position:bottom as they're not properly supported in Outlook, Gmail, Yahoo etc.

I'll post the markup here if you want it. I can't JFiddle, because it doesn't like inline CSS.

So it is possible. Kinda. But you'd be much better off redesigning your layout. Hope that helps

Danger Phoenix · 17 Jan 2015 at 12:41

Cheers for the advice guys

I've gone back to the design team and just told them it isn't possible to do (may not be completely accurate but it stops the discussion right there). In the mean time I've continued with the proof of concept and this is what I have so far:
http://jsfiddle.net/hirenshah/rdux8vkg/15/

MSO is oh so annoying when it comes to ignoring specified image dimensions, so I'm going to have to use if logic everywhere to use a different image for MSO

davetherave2 · 19 Jan 2015 at 00:29

have you considered looking at INK by Zurb

http://zurb.com/ink/

I've used it in the past and seems to be pretty good. It is basically their email version of Foundation (eg bootstrap alternative)

This may help resolve headaches in the future.

macmodder · 19 Jan 2015 at 12:43

Responsive emails are nothing short of alchemy. I attended a talk by the head guy from Mail Chimp, and basically it's hack city if you care about it working for any but the most recent email clients.

I'd recommend looking at the mail chimp templates as they're pretty interesting. I'd also suggest, where possible, simplifying the layout down as much as possible to start with – I think they days of HTML emails which are little more than chopped up versions of print flyers are (rightfully) numbered.

Tripnologist · 19 Jan 2015 at 19:42

I second Ink. It's a great little email framework.

simisker · 19 Jan 2015 at 20:07

All the frameworks in the world won't help you if the email has been designed by someone who doesn't understand the very specific requirements [read: "limitations"] of responsive email design, unfortunately.

If you're lucky enough to be in the position of doing both design and build, then a framework is a massive timesaver - not just in terms of building the structure, but also by reducing the amount of testing time.

However, if I had a pound for every time I'd had to deal with an email that had been designed as a web page [Text over background images! Ornate borders! Inflexible text areas! Forms!!] or even worse: print flyers [as macmodder mentioned - lots of tiny text! No CTAs! Non-trackable phone numbers!], then... well, I wouldn't have had to start my own email business

Danger Phoenix · 20 Jan 2015 at 08:54

I've gone down the route of adapted an existing template provided by Litmus

pakratna · 20 Jan 2015 at 12:25

Try using this http://templates.mailchimp.com/resources/inline-css/

Deleted member 66701 · 22 Jan 2015 at 00:44

No decent web dev should be using tables for non tabular data.

kaku · 22 Jan 2015 at 00:58

davetherave2 said:
have you considered looking at INK by Zurb

http://zurb.com/ink/

I've used it in the past and seems to be pretty good. It is basically their email version of Foundation (eg bootstrap alternative)

This may help resolve headaches in the future.

Thanks for this, sure it'll come in very handy in the future!

MoDe · 22 Jan 2015 at 09:41

amigafan2003 said:
No decent web dev should be using tables for non tabular data.

Tables are the foundation of Email design. Not many email clients support divs etc.

HTML Responsive Tables

Deleted member 66701

Deleted member 66701