td or not td? That is now a question.

Some time ago now we published a piece on how to make content re-order – “stack” on mobile. Essentially distilled into 3 methodologies:

1. Column splitting

2. Table aligning

3. Hybrid

Now Column splitting was great, using display: block or float: left to reorder table columns into rows, with one mega flaw: not working in a lot of ‘droid. Mainly because the doctype got stripped and then this *[class=colsplit] {width:100% !important; display: block !important;} was no good.

So Table align became a lot more attractive, despite being a little less forgiving to code; tables just sit side by side and then push each other around when media query is triggered – with or without Doctype.

This was one of the base principles of Hybrid, a fuller solution to optimising without media queries, but we’re not going to talk about that in this post. We are going to revisit column splitting.

A guy called Steven Collins kindly left a comment in one of our Lab posts about coding methods and suggested that if we use <th> (table header) instead of <td> we could column split again without a Doctype. And therefore column splitting, with all its plus points over table align, would now work in ‘droid.

It does.

There are rules and caveats as ever, but if used sparingly this actually works as an option. At the very least, it could be a viable way to retro-fit code that previously only worked in iPhone in order to make it work on more devices.

Here is the updated codepen of the types

And here is the full updated th stacking code


1. <th> naturally may want to bold and centre its contents, override this with align and font-weight.

2. As ever, be careful there are no mismatching tags i.e. <th></th> not <th></td> or anything cray cray – it can be hard to troubleshoot. When is it ever easy with email code?

3. If stacking column splitting tables on top of each other, wrap the whole thing in a <table><tr><td></td></tr></table> so that it behaves itself in AOL.

4. What are you waiting for? This is potentially such a cool method.

As an extra, all the reversing stuff we have talked about previously works. This is a real winner, especially if you are using an ESP which usefully strips Doctype for example.


Steven has already posted up in the Litmus community (good on him) about this here *bump*


4 column Hybrid shape with an hack

A few people have asked me for more Hybrid shapes and I keep Slacking…. cool gifs to co-workers instead, amirite?! Sorry…

Anyway, here we are: this is a quick example of a 4 column stacking 2×2 without the need for media queries. This is also a little more fun than a regular block, as we have expanded upon the Campaign Monitor method of centering without media queries (really can’t explain how useful that post has been) again and this time removed the need for a fixed width on the div element.
Continue reading