Reply To: Problem table-cell, table-row with Safari & Chrome

[WebDevJoshB]

I never had this issue until the last Chrome update (45.0.2454.85). I’ve always used this technique for responsive email coding (otherwise I wouldn’t use tables, obviously) for viewports less than 480px when there is a lot of horizontal content that needs to be changed to a vertical layout.

Initially it works, but if you resize your browser at the 480 breakpoint, the stacked TDs render in a hybrid table-cell/display:block layout. Or, if you’re viewing on a smartphone, switching from portrait to landscape back to portrait will give the same wonky layout problem.

As it’s an email, JavaScript is not an option.

There is a Chrome bug submitted for it, but it’s been posted for awhile so I don’t think they will be “fixing” anytime soon.

CodePen: http://codepen.io/WebDevJoshB/pen/JYGBvB

I’m looking at the “flexbox layout”, floats, positions, but so far nothing is working. Maybe someone else has had better luck?

*****EDIT*****

I found the solution: In the containing <tr> set it to display:table-cell.

table.classname tr { display:table-cell !important; }
table.classname td { display:block; width:100% !important; }