CODEWITHSUNDEEP
htmlcssemailhtml-tablehtml-email
Andrew Ice
Andrew Ice

Reputation: 841

How can I get a <td> to go from inline to block within an email template

On the desktop email clients, I want my td elements to show up side by side. Which they do, that's originally what a td is built to do.

<table>
  <tbody>
    <tr>
      // These sit side by side in the email client on Desktop
      <td width="300">
        content
      </td>
      <td width="300">
        content
      </td>
    </tr>
  </tbody>
</table>

However, on the mobile view.

Using a Media Query. I want to take these and make them full width/block, one on top of the other when the screen width hits 600px. But this doesn't seem to be working. I've tried a fair variety of things. Making these table's instead of td's was one way that worked.

However it wouldn't work in Outlook and a variety of other clients.

<table>
  <tbody>
    <tr>
      // These sit side by side in most email clients on Desktop (not Outlook), and stack on mobile.
      <table>
        content
      </table>
      <table>
        content
      </table>
    </tr>
  </tbody>
</table>

My Second approach was using tr's and setting their display to table-cell. This also worked, but only a select few clients.

<table>
  <tbody>
    <tr>
      // These sit side by side in most email clients on Desktop (not Outlook), and stack on mobile.
      <tr class="display: cell">
        content
      </tr>
      <tr class="display: cell">
        content
      </tr>
    </tr>
  </tbody>
</table>

Does anyone know a good way to do this?

Upvotes: 2

Views: 2061

Answers (5)

Geoff Phillips
Geoff Phillips

Reputation: 221

Actually the best way to do this is to have a table to wrap all your "TDs," but then instead of multiple TDs just put a bunch of tables in your table's main TD. The outer table is a container that can be used to constrain the inner tables.

This technique works with all major email clients. (Edited this for the comments)

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        @media only screen and (max-width: 479px) {
            .mobile_width {width:100% !important;}
        }
    </style>
</head>
<body>
    <table width="600" class="mobile_width">
        <tr>
            <td>
                <table width="200" align="left" class="mobile_width">
                    <tr><td></td></tr>
                </table>
                <table width="200" align="left" class="mobile_width">
                    <tr><td></td></tr>
                </table>
                <table width="200" align="left" class="mobile_width">
                    <tr><td></td></tr>
                </table>
            </td>
        </tr>
</table>
</body>
</html>

Upvotes: 1

Andrew Ice
Andrew Ice

Reputation: 841

Thanks for the help guys.

Overall I found this link: https://blog.jmwhite.co.uk/2014/09/08/turning-floated-tables-columns-outlook/

This helped out a lot with my issue. It helped me realize what I was doing wrong in my design, as well as introduced me to the mso conditionals.

The original issue was that there is so much padding added in Microsoft Outlook, I had to use:

border-collapse: collapse;

Along with the MSO space style:

mso-table-lspace: 0pt;
mso-table-rspace: 0pt;

And these were both style definitions on all of the tables, and table data tags within the entire document.

This removed enough spacing that allowed my images to fit two tables, side by side.

Thus in this scenario, I was able to use two tables, to fit two elements side by side in an email, and set them to full width so that they would stack in smaller screen sizes.

Upvotes: 1

Gortonington
Gortonington

Reputation: 3587

Best example for it would be:

<style>
@media only screen and (max-width: 600px) {
th {width:100% !important; display:block !important;}
}
</style>
<table>
<tr>
<th width="48%">CONTENT</th>
<th width="48%">CONTENT2</th
</tr>
</table>

This is because Android native client will not recognize the display block on TDs anymore, so you can get around this by using TH. This may not work in the Gmail App though as it doesnt recognize the style tag, so you may need to create mobile first and put media queries or max-widths along with MSO conditionals on desktop breakpoints to create desktop version.

Upvotes: 2

Jay
Jay

Reputation: 1678

You need to look into media queries within your CSS.

Example:

@media all and (max-width:900px) {
    div#example { display: block; }
}

fiddle with possibly a better solution : http://jsfiddle.net/7pgdjckr/

Upvotes: 0

Raydot
Raydot

Reputation: 1586

I would move away from tables and instead create your own "blocks" using something like Bootstrap. Or better yet, something that's specifically just a grid system like Responsive Grid System.

If you are going to do it with a table, you will need to use media queries to tell the browser how to "re-lay" the content at specific sizes. A Google search on "CSS Media Queries" should tell you all you need to know, and media queries work in most browsers.

Upvotes: 0

Related Questions