Search code examples
htmlcsshtml-email

Display table cell on the next line full width on email template

I'm doing an email template and on mobile I want to make td be full width and both td on the different line: I can achieve this by doing display: flex; flex-direction: column; on tbody but thats more modern solution which doesnt support many email software. How could i achieve this with floats or soemething less modern ? tried: display:block; float: left; width:100%; on both of the td which drops on the new line but it does not put td 100% on tr. Maybe anyone has a solution? markup and inline styles are below.

<table border="0" cellpadding="0" cellspacing="0"  style=" border-collapse:separate;width: 100%;background:red; padding: 0px 0px;">
    <tbody style="width: 100%; ">

        <tr >

            <td style="padding-left: 35px; position: relative; text-align: center; border-top: 1px solid green;">
                <img width="175px" alt="test" src="img1.png" border="0" style="max-width:100%;vertical-align:top;" />
                <p style="text-transform:uppercase; color: #ffffff; text-align:center; margin:0px; margin-bottom: 50px;    max-width: 180px;margin: auto;">test1</p>

            </td>
            <td style="padding-right: 35px; position: relative; text-align: center; border-top: 1px solid green;">
                <img width="175px" alt="test" src="img2.png" border="0" style="max-width:100%;vertical-align:top;" />
                <p style="text-transform:uppercase; color: #ffffff; text-align:center; margin:0px; margin-bottom: 50px;    max-width: 180px;margin: auto;">test2</p>

            </td>

        </tr>
    </tbody>
</table>
Solution

  • You can do this by setting the td's to block then setting width to 100% when it goes mobile. For example:

    <head>
   <style>
      /* When the email goes mobile, set width to 100, height auto and make the element block */
      @media screen and (max-width: 630px;){
         .width{width: 100% !important; height: auto !important; display: block !important}
      }
   </style>
</head>
<body>
<!-- Body content etc -->
<table border="0" cellpadding="0" cellspacing="0"  style=" border-collapse:separate;width: 100%;background:red; padding: 0px 0px;">
<tbody style="width: 100%; ">
    <tr >
        <td style="padding-left: 35px; position: relative; text-align: center; border-top: 1px solid green;" class="width">
        <!-- Added the class "width" to the td -->
            <img width="175px" alt="test" src="img1.png" border="0" style="max-width:100%;vertical-align:top;" />
            <p style="text-transform:uppercase; color: #ffffff; text-align:center; margin:0px; margin-bottom: 50px;    max-width: 180px;margin: auto;">test1</p>

        </td>
        <td style="padding-right: 35px; position: relative; text-align: center; border-top: 1px solid green;" class="width">
        <!-- Added the class "width" to the td -->
            <img width="175px" alt="test" src="img2.png" border="0" style="max-width:100%;vertical-align:top;" />
            <p style="text-transform:uppercase; color: #ffffff; text-align:center; margin:0px; margin-bottom: 50px;    max-width: 180px;margin: auto;">test2</p>

        </td>

    </tr>
</tbody>

    Alternatively - you can have two tables in the same TD and do the same trick to make them sit under each other on mobile, the only difference being that you don't have to set the tables to display block. And be cautious when using the table method as outlook will not by default display two tables next to each other in a row, it will try to stack them.

    In this case, you would have to tell outlook to make columns by placing the following snippet between the tables.

    </table>
<!--[if mso]>
</td>
<td valign="top" align="center">
<![endif]-->
<table>