TD Display Block Not Working on Android

MP

3

Martin Poulsen replied 2015-12-10 17:35:37

Try using <th>. It seems crazy, but that did it for me.

Reply to Martin Poulsen

FC

3

Fabio Carneiro replied 2014-05-28 19:23:05

If you're using Android 4.4 (KitKat), then the reason is that support for display:block on TDs has (seemingly) been dropped. There are a few other methods to use (like display:table-header-group), but, for my money, three left-aligned tables are the most flexible way to achieve the same effect, which has the added benefit of the tables stacking in Gmail without the use of media queries.

This issue was being discussed in this thread: https://litmus.com/community/discussions/240-floating-columns

Reply to Fabio Carneiro

CH

0

Chris Hughes replied 2018-03-02 14:59:22

This works but what if you want to align the content in column 3 to the right on desktop view but left align the content in mobile view?

VD

0

Vic Dinovici replied 2014-05-28 19:51:00

this what I ended up doing, using tables with align left instead of columns.

LH

0

Leonard Herndon replied 2017-03-09 18:59:58

Does this work in outlook as well though?

JB

0

Josh Blauvelt replied 2017-03-09 20:28:13

Outlook the desktop client, or outlook the mobile app?

JF

2

JC FCT replied 2016-01-08 09:33:50

You can use <th> but don't forget to add style="font-weight:normal;", normally that works well

Reply to JC FCT

GF

0

Gareth Foley replied 2018-04-13 17:20:03

This helped me out more than you will ever know!

MV

0

Marjolein Verheij replied 2018-03-05 09:47:43

Just use TH instead of TD and it should work like a charm!

Reply to Marjolein Verheij

VH

0

Vadim Huck replied 2018-03-05 10:28:32

I think u need to have it inline-block to be "fluid" other wise it will not work and the very first <td> hase to be align="center"

I am not sure how your template is looking but for me it looks like this and tested in litmus works fine =)


<tr>
    <td class="three-column" style="padding: 0 0 0 0;text-align:center;font-size:0;">
        <!--[if (gte mso 9)|(IE)]>
        <table width="100%" style="border-spacing:0;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;" >
        <tr>
        <td width="200" valign="top" style="padding: 0 0 0 0;" >
        <![endif]-->
            <div class="column" style="width:100%;max-width:200px;display:inline-block;vertical-align:top;">
                <table width="100%" style="border-spacing:0;font-family:sans-serif;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;">
                    <tbody>
                        <tr>
                            <td class="inner" align="center" style="padding: 0 0 0 0;">
                                <table style="border-spacing:0;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;width:100%;" class="contents">
                                    <tbody>
                                        <tr>
                                            <td  align="center">
                                                <a href="https://www.google.de" target="_blank" style="mso-line-height-rule:exactly;line-height:0px;display:inline-block;">
                                                    <img src="demo/400x469.jpg" border="0" width="200" style="width:100%;max-width:200px;">
                                                </a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="center" style="padding: 0 0 17px 0;">
                                                <span style="font-size:17px;text-align:center;font-family:Arial,sans-serif;mso-line-height-rule:exactly;line-height:24px;">
                                                    TXT <br /><span style="color: #737373;">7,95€</span>
                                                </span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div><!--[if (gte mso 9)|(IE)]></td><td width="200" valign="top" style="padding: 0 0 0 0;" ><![endif]--><div class="column" style="width:100%;max-width:200px;display:inline-block;vertical-align:top;">
                <table width="100%" style="border-spacing:0;font-family:sans-serif;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;">
                    <tbody>
                        <tr>
                            <td class="inner" align="center" style="padding: 0 0 0 0;">
                                <table style="border-spacing:0;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;width:100%;" class="contents">
                                    <tbody>
                                        <tr>
                                            <td  align="center">
                                                <a href="https://www.google.de" target="_blank" style="mso-line-height-rule:exactly;line-height:0px;display:inline-block;">
                                                    <img src="demo/400x469.jpg" border="0" width="200" style="width:100%;max-width:200px;">
                                                </a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="center" style="padding: 0 0 17px 0;">
                                                <span style="font-size:17px;text-align:center;font-family:Arial,sans-serif;mso-line-height-rule:exactly;line-height:24px;">
                                                    TXT <br /><span style="color: #737373;">7,95€</span>
                                                </span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div><!--[if (gte mso 9)|(IE)]></td><td width="200" valign="top" style="padding: 0 0 0 0;" ><![endif]--><div class="column" style="width:100%;max-width:200px;display:inline-block;vertical-align:top;">
                <table width="100%" style="border-spacing:0;font-family:sans-serif;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;">
                    <tbody>
                        <tr>
                            <td class="inner" align="center" style="padding: 0 0 0 0;">
                                <table style="border-spacing:0;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;width:100%;" class="contents">
                                    <tbody>
                                        <tr>
                                            <td  align="center">
                                                <a href="https://www.google.de" target="_blank" style="mso-line-height-rule:exactly;line-height:0px;display:inline-block;">
                                                    <img src="demo/400x469.jpg" border="0" width="200" style="width:100%;max-width:200px;">
                                                </a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="center" style="padding: 0 0 17px 0;">
                                                <span style="font-size:17px;text-align:center;font-family:Arial,sans-serif;mso-line-height-rule:exactly;line-height:24px;">
                                                    TXT <br /><span style="color: #737373;">7,95€</span>
                                                </span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
    <!--[if (gte mso 9)|(IE)]>
    </td>
    </tr>
    </table>
    <![endif]-->
    </td>
</tr>

Reply to Vadim Huck

CF

0

Courtney Fantinato replied 2014-06-12 01:08:18

Confirming this issue is happening on a Nexus 7 as well with 4.4 in the native email app.

Reply to Courtney Fantinato

NS

0

Narong Saron replied 2014-05-28 19:01:26

Which app are you having trouble with? The Gmail app doesn't support media query, so your emails will not be responsive.

Reply to Narong Saron

VD

0

Vic Dinovici replied 2014-05-28 19:02:41

no, it's not Gmail app, it's the native email.

NS

0

Narong Saron replied 2014-05-28 19:04:39

Strange. The only reason I can think of is not having a doctype. Webkit will not render td as block elements if the document is missing a doctype.

VD

0

Vic Dinovici replied 2014-05-28 19:50:19

I always use doctype

JB

0

Josh Blauvelt replied 2016-09-08 05:09:16

TL;DR: The doctype gets stripped out.

The native email app used in Android 4.4 strips out the doctype which is why "display:block" isn't being recognized on <td>s. Using "display:block" and <th>s like other people have suggested will work, but I've encountered a few minor issues when using <th> (ex: the dir=ltr/rtl trick to get the right column to appear above the left column when stacking won't work on <th>, and align/valign needs to be specified as inline CSS as the attributes are ignored in Yahoo webmail), so the safest bet is to use tables and align="left" and align="right." To get them to stack for mobile you set the float CSS property to none.

ER

0

Elliot Ross replied 2014-05-29 13:14:33

there's a split in the native android client these days - the latest Samsung devices (S4+, and older ones with Kitkat) seem to have their own version, which has support broadly consistent with that of the Gmail app (i.e. a pain)

NS

0

Narong Saron replied 2014-05-29 16:12:15

D'oh... That's a great way to add to the inconsistencies of email.

BC

0

Benjamin Carver replied 2014-05-28 19:40:52

Have you also added in the media query a width of 100%?

Reply to Benjamin Carver

VD

0

Vic Dinovici replied 2014-05-29 13:11:13

that wasn't working either. It seems there is no fix as we speak so I will use tables instead of columns. This works pretty well so far.

The Litmus Community is the place for email designers and marketers to learn, grow, and educate each other about everything email.

TD Display Block Not Working on Android

Sign in to Community

Join the Litmus Community

Sign up to Community

Get more out of your Litmus account

Forgot password