CODEWITHSUNDEEP
htmlcssemailhtml-table
Rain
Rain

Reputation: 259

Responsive table for Email

Trying to get last piece done which is the Email footer area.

There are 4 links in a table, which in web-view are fine, they are in horizontal line.

On Mobile version I'm trying to have them in sets of 2.
Meaning 2 links on top and 2 below them.

The thing is this needs to be done with inline CSS, without having style in it's own separate section.

<table border="0" cellpadding="0" cellspacing="0" id="Table5" width="100%">
  <tr style="font-size: 11px; background-color: black;">
   <td align="center">
    <br>
    <br>
    <span style="color:#7A7A7A; line-height: 1.3; "><font face="Arial" size="1" ><b>GENERIC INFORMATION 123
      <div style="line-height:1.3;">T 000 000 000 |
      [email protected]<br></div></b></font></span><br>
    <br>
     <span style="color: rgb(221, 221, 221);"><font face="Arial" size="1"><b><a alias="" conversion="false" data-linkto="http://" href="google.com" style="color:#999999;text-decoration:none;" title=""><span style="padding:12px;">BOOK APPOINTMENT</span></a><a alias="" conversion="false" data-linkto="http://" href="google.com" style="color:#999999;text-decoration:none;" title=""><span style="padding:12px;">PRIVACY</span></a><a alias="" conversion="false" data-linkto="http://"google.com" style="color:#999999;text-decoration:none;" title=""><span style="padding:12px;">UNSUBSCRIBE</span></a><a alias="" conversion="false" data-linkto="http://" href="google.com" style="color:#999999;text-decoration:none;" title=""><span style="padding:12px;">CONTACT US</span></a></b></font></span><br>
    <br>
    </td></tr></table>

Any advice? @media is out of the question currently since it cannot be used with inline CSS.

Upvotes: 0

Views: 70

Answers (1)

gwally
gwally

Reputation: 3527

This is the code you need to start. You'll have to do some footwork to get this to not stack in Outlook desktop email clients. It works in every major email client and does not require a @media tag.

The first table always spans the width of email body.

The Left and Right are 300px wide. When the email client is under 300px wide, they will stack.

<table role="presentation" cellspacing="0" cellpadding="0" border="1" width="100%" style="">
  <tr>
    <td style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: center;">
      <p style="margin: 0;">Single Column</p>
    </td>
  </tr>
</table>

<table role="presentation" cellspacing="0" cellpadding="0" border="1" width="300" style="float:left;">
  <tr>
    <td style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;">
      <p style="margin: 0;">Left Column</p>
    </td>
  </tr>
</table>

<table role="presentation" cellspacing="0" cellpadding="0" border="1" width="300" style="float:left;">
  <tr>
    <td style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;">
      <p style="margin: 0;">Right Column</p>
    </td>
  </tr>
</table>

Good luck.

Upvotes: 1

Related Questions