The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Problem table-cell, table-row with Safari & Chrome

  • This topic is empty.
Viewing 3 posts - 16 through 18 (of 18 total)
  • Author
  • #141529
    Kushal Jayswal


    display: block !important;

    for smaller screens works for me.


    Brendan Molloy

    I’ve had this bug a lot. Basically, if you change from display: table-cell to display: block on a media query, it can refuse to redraw and end with some unexpected results.

    My elegant solution:

    if (/WebKit/.test(navigator.userAgent) && !/(Mobile|Tablet)/.test(navigator.userAgent)) {
      window.lastImmediate = null;
      $(window).resize(function() {
        if (window.lastImmediate) {
        window.lastImmediate = setImmediate(function() {
          var pony = $("<style>* { display: inline }</style>");
          requestAnimationFrame(function() {
            window.lastImmediate = null;

    Doing this forces the browser to redraw those elements with block types by forcing them to temporarily go from table-cell to inline before going to a block type.

    Regex is to ensure this only applies to WebKit browsers that aren’t tablet or mobile, as those don’t display the issue.

    Uses setImmediate polyfill from here:

    You could easily just sub in a setTimeout in place if you don’t want the dep but the results might be a bit less seamless.


    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.


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


    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; }

Viewing 3 posts - 16 through 18 (of 18 total)
  • The forum ‘CSS’ is closed to new topics and replies.