How to Make this Table Collapsible?

HTML & CSS
1

Hi,

I’m trying to get this table to be collapsible so I can add it to my responsive template.

<table class="main-table" cellspacing="0" cellpadding="0" border="0" width="600" style="border:1px solid #EAEAEA;">
    <thead>
    <tr>
        <th align="left" bgcolor="#800080" style="color:#fff;font-size:13px; padding:5px 9px 6px 9px; line-height:1em;">Product Name:</th>
        <th align="left" bgcolor="#800080" style="color:#fff;font-size:13px; padding:5px 9px 6px 9px; line-height:1em;">SKU</th>
        <th align="left" bgcolor="#800080" style="color:#fff;font-size:13px; padding:5px 9px 6px 9px; line-height:1em;">Resolution</th>
        <th align="left" bgcolor="#800080" style="color:#fff;font-size:13px; padding:5px 9px 6px 9px; line-height:1em;">Requested Qty</th>
        <th align="left" bgcolor="#800080" style="color:#fff;font-size:13px; padding:5px 9px 6px 9px; line-height:1em;">Qty</th>
        <th align="left" bgcolor="#800080" style="color:#fff;font-size:13px; padding:5px 9px 6px 9px; line-height:1em;">Status</th>
    </tr>
    </thead>
    <tbody>

	
<!--This part may get repeated-->	
	
    <tr>
        <td valign="top" align="left" style="font-size:11px;padding:3px 9px;border-bottom:1px dotted #000">
            <strong>Black Child Angel Figurine Singing</strong>

            <dl class="item-options">
           
                <dt>Color</dt>
                <dd>Red</dd>
            
            </dl>
            
        </td>
        <td valign="top" align="left" style="font-size:11px;padding:3px 9px;border-bottom:1px dotted #000">
            <span>SKU</span>
        </td>

        <td valign="top" align="left" style="font-size:11px;padding:3px 9px;border-bottom:1px dotted #000">
            Store Credit
        </td>
        <td valign="top" align="center" style="font-size:11px;padding:3px 9px;border-bottom:1px dotted #000">
            1
        </td>
        <td valign="top" align="center" style="font-size:11px;padding:3px 9px;border-bottom:1px dotted #000">
            1
        </td>
        <td valign="top" align="left" style="font-size:11px;padding:3px 9px;border-bottom:1px dotted #000">
            Pending
        </td>
    </tr>

<!--This part may get repeated-->	
	
	
    </tbody>
</table>

Any tutorials about doing this or ideas?

Thanks

2

Here is another thread on the subject:-

I use Paul’s method quite a bit.

You may want to start by clearing out all those old attributes and in-line styles, they are only going to cause trouble and make the code look ugly.

2 Likes
3

Here’s the method that Sam pointed to above with your table code tidied up and responsified (I know its not a real word) :slight_smile:

Feel free to style accordingly.

2 Likes
4

… but it ought to be. smile

1 Like
5

I appreciate it and it looks great just what I’m after but it doesn’t work on actual mobile devices!

Sadly : )

6

What did you test on?
Did you include the viewport metatag in your page head?

<meta name=viewport content="width=device-width, initial-scale=1">
7

I tested it on my mobile phone. The head part disappears on one devise and in Google it doesn’t change. Yes, I have the <meta name=viewport content="width=device-width, initial-scale=1"> added the the head.

8

Can you show the whole exact page code that you are testing or a link?

1 Like
9

I’m on a mobile at the moment (iphone5s) and even the codepen seems to show it correctly.

image
image640×1136 57.8 KB

What are you seeing and what device?

10

Well something else must be wrong : )

Here’s the complete code as best I can get it. Hard dealing with emails!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
 
   <body style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0 !important; padding: 0; width: 100% !important; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; background-color: #800080; background: #800080; text-align: left; color: #333333;">
      <!--@subject New Order #  @-->
      <!--@vars
         {"store url=\"\"":"Store Url",
         "var logo_url":"Email Logo Image Url",
         "var logo_alt":"Email Logo Image Alt",
         "htmlescape var=$order.getCustomerName()":"Customer Name",
         "var store.getFrontendName()":"Store Name",
         "store url=\"customer/account/\"":"Customer Account Url",
         "var order.increment_id":"Order Id",
         "var order.getCreatedAtFormated('long')":"Order Created At (datetime)",
         "var order.getBillingAddress().format('html')":"Billing Address",
         "var payment_html":"Payment Details",
         "var order.getShippingAddress().format('html')":"Shipping Address",
         "var order.getShippingDescription()":"Shipping Description",
         "layout handle=\"sales_email_order_items\" order=$order":"Order Items Grid",
         "var order.getEmailCustomerNote()":"Email Order Note"}
         @-->
      <!--@styles
         @-->
      
      <center class="wrapper" style="width: 100%; table-layout: fixed; background-color: #800080; background: #800080; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; padding: 10px 0;">
         <div class="webkit" style="max-width: 600px; margin: 0 auto;">
            <!--[if (gte mso 9)|(IE)]>
            <table width="600" align="center">
               <tr>
                  <td>
                     <![endif]-->
                     <table class="outer" align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0; font-family: sans-serif; color: #333333; width: 100%; max-width: 600px; border: 1px solid #fdf4f7; background-color: #f4f4f4;">
                        <tbody><tr>
                           <td class="logo" style="text-align: center; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; padding: 0;">
                              <a href="https://www.example.com/" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-decoration: underline;">
                              <img style="padding: 10px 0; -ms-interpolation-mode: bicubic; border: 0; outline: none; text-decoration: none;" width="247" height="38" src="https://www.example.com/media/email/logo/default/angels-for-everyone.png" alt="Angels For Everyone" border="0">
                              </a>
                           </td>
                        </tr>
                        <tr>
                           <td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; padding: 0;">
                              <img src="https://www.google-analytics.com/collect?v=1&amp;tid=UA-93172931-1&amp;cid=&amp;t=event&amp;ec=Transactional%20Emails&amp;ea=open&amp;el=&amp;dt=&amp;cs=order_confirmation&amp;cm=email&amp;cn=Transactional_Email_Open" style="-ms-interpolation-mode: bicubic; border: 0; outline: none; text-decoration: none;"><table class="outer" align="center" style="max-width: 560px; margin: 0 20px 0 20px; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0; font-family: sans-serif; color: #333333; width: 100%; border: 1px solid #fdf4f7; background-color: #f4f4f4;">

                                 <tbody><tr>
                                    <td class="one-column" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; padding: 0;">
                                       <table width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0; font-family: sans-serif; color: #333333;">
                                          <tbody><tr>
                                             <td class="inner contents" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; padding: 0; width: 100%; text-align: left;">
                                                <p class="h1" style="text-transform: capitalize; font-family: 'OpenSans', Verdana, Arial !important; font-weight: bold; word-break: normal!important; margin: 0; font-size: 14px; margin-bottom: 10px;">Hi,</p>
            <p style="font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; margin: 0; font-size: 14px; margin-bottom: 10px;"><br>
                Your Return request has been received. You will be notified when your request is reviewed.
                If you have any questions about your Return, please contact us at <a href="mailto:support@example.com" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-decoration: underline;">support@example.com</a>
            </p>
            <p style="font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; margin: 0; font-size: 14px; margin-bottom: 10px;">Thank you for your business.</p>
                                                <p style="font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; margin: 0; font-size: 14px; margin-bottom: 10px;">
                                                   Sincerely,
                                                   <br><br>
                                                   Noah Clemens
                                                   <br>
                                                   Customer Service
                                                </p>
                                                <br>
            <h3 style="font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important;">Your Return <span class="no-link">#</span> - </h3>
            <p style="font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; margin: 0; font-size: 14px; margin-bottom: 10px;">Placed on </p>



                                          <table class="main-table mobile-optimised" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse; border-spacing: 0; font-family: sans-serif; color: #333333; width: 100%; max-width: 980px; margin: auto; border: 1px solid #eaeaea;">
  <thead>
    <tr>
      <th style="font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; vertical-align: top; text-align: left; background: #800080; color: #fff; font-size: 0.8rem; padding: 5px 9px 6px 9px; line-height: 1;">Product Name:</th>
      <th style="font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; vertical-align: top; text-align: left; background: #800080; color: #fff; font-size: 0.8rem; padding: 5px 9px 6px 9px; line-height: 1;">SKU</th>
      <th style="font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; vertical-align: top; text-align: left; background: #800080; color: #fff; font-size: 0.8rem; padding: 5px 9px 6px 9px; line-height: 1;">Resolution</th>
      <th style="font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; vertical-align: top; text-align: left; background: #800080; color: #fff; font-size: 0.8rem; padding: 5px 9px 6px 9px; line-height: 1;">Requested Qty</th>
      <th data-th="Qty" style="font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; vertical-align: top; text-align: left; background: #800080; color: #fff; font-size: 0.8rem; padding: 5px 9px 6px 9px; line-height: 1;">Qty</th>
      <th style="font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; vertical-align: top; text-align: left; background: #800080; color: #fff; font-size: 0.8rem; padding: 5px 9px 6px 9px; line-height: 1;">Status</th>
    </tr>
  </thead>
  <tbody>
    
    <!--This part may get repeated-->
    <tr>
      <td data-th="Product Name:" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; padding: 3px 9px; vertical-align: top; text-align: left; font-size: 0.7rem; border-bottom: 1px solid #999; line-height: 1.2; background: #f9f9f9;">
<h3 class="table-heading" style="font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; font-size: 0.7rem; margin: 0 0 0.5em;">Black Child Angel Figurine Singing</h3>
        <dl class="item-options" style="margin: 0 0 0.5rem; overflow: hidden; clear: both;">
          <dt style="margin: 0; font-weight: bold; display: inline-block; padding: 0 5px 0 0; vertical-align: top;">Color</dt>
          <dd style="display: inline-block; margin: 0; padding: 0 5px 0 0; vertical-align: top;">Red</dd>
        </dl>
</td>
      <td data-th="SKU" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; padding: 3px 9px; vertical-align: top; text-align: left; font-size: 0.7rem; border-bottom: 1px solid #999; line-height: 1.2; background: #f9f9f9;">SKU</td>
      <td data-th="Resolution" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; padding: 3px 9px; vertical-align: top; text-align: left; font-size: 0.7rem; border-bottom: 1px solid #999; line-height: 1.2; background: #f9f9f9;">Store Credit</td>
      <td data-th="Requested Qty" class="numbers" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; padding: 3px 9px; text-align: left; vertical-align: top; font-size: 0.7rem; border-bottom: 1px solid #999; line-height: 1.2; background: #f9f9f9;"> 1 </td>
      <td data-th="Qty" class="numbers" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; padding: 3px 9px; text-align: left; vertical-align: top; font-size: 0.7rem; border-bottom: 1px solid #999; line-height: 1.2; background: #f9f9f9;"> 1 </td>
      <td data-th="Status" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; padding: 3px 9px; vertical-align: top; text-align: left; font-size: 0.7rem; border-bottom: 1px solid #999; line-height: 1.2; background: #f9f9f9;">Pending </td>
    </tr>
    <!--This part may get repeated--> 
    <!--This part may get repeated-->
    <tr>
      <td data-th="Product Name:" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; padding: 3px 9px; vertical-align: top; text-align: left; font-size: 0.7rem; border-bottom: 1px solid #999; line-height: 1.2;">
<h3 class="table-heading" style="font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; font-size: 0.7rem; margin: 0 0 0.5em;">Black Child Angel Figurine Singing</h3>
        <dl class="item-options" style="margin: 0 0 0.5rem; overflow: hidden; clear: both;">
          <dt style="margin: 0; font-weight: bold; display: inline-block; padding: 0 5px 0 0; vertical-align: top;">Color</dt>
          <dd style="display: inline-block; margin: 0; padding: 0 5px 0 0; vertical-align: top;">Red</dd>
        </dl>
</td>
      <td data-th="SKU" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; padding: 3px 9px; vertical-align: top; text-align: left; font-size: 0.7rem; border-bottom: 1px solid #999; line-height: 1.2;">SKU</td>
      <td data-th="Resolution" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; padding: 3px 9px; vertical-align: top; text-align: left; font-size: 0.7rem; border-bottom: 1px solid #999; line-height: 1.2;">Store Credit</td>
      <td data-th="Requested Qty" class="numbers" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; padding: 3px 9px; text-align: left; vertical-align: top; font-size: 0.7rem; border-bottom: 1px solid #999; line-height: 1.2;"> 1 </td>
      <td data-th="Qty" class="numbers" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; padding: 3px 9px; text-align: left; vertical-align: top; font-size: 0.7rem; border-bottom: 1px solid #999; line-height: 1.2;"> 1 </td>
      <td data-th="Status" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; padding: 3px 9px; vertical-align: top; text-align: left; font-size: 0.7rem; border-bottom: 1px solid #999; line-height: 1.2;">Pending </td>
    </tr>
    <!--This part may get repeated--> 
    <!--This part may get repeated-->
    <tr>
      <td data-th="Product Name:" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; padding: 3px 9px; vertical-align: top; text-align: left; font-size: 0.7rem; border-bottom: 1px solid #999; line-height: 1.2; background: #f9f9f9;">
<h3 class="table-heading" style="font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; font-size: 0.7rem; margin: 0 0 0.5em;">Black Child Angel Figurine Singing</h3>
        <dl class="item-options" style="margin: 0 0 0.5rem; overflow: hidden; clear: both;">
          <dt style="margin: 0; font-weight: bold; display: inline-block; padding: 0 5px 0 0; vertical-align: top;">Color</dt>
          <dd style="display: inline-block; margin: 0; padding: 0 5px 0 0; vertical-align: top;">Red</dd>
        </dl>
</td>
      <td data-th="SKU" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; padding: 3px 9px; vertical-align: top; text-align: left; font-size: 0.7rem; border-bottom: 1px solid #999; line-height: 1.2; background: #f9f9f9;">SKU</td>
      <td data-th="Resolution" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; padding: 3px 9px; vertical-align: top; text-align: left; font-size: 0.7rem; border-bottom: 1px solid #999; line-height: 1.2; background: #f9f9f9;">Store Credit</td>
      <td data-th="Requested Qty" class="numbers" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; padding: 3px 9px; text-align: left; vertical-align: top; font-size: 0.7rem; border-bottom: 1px solid #999; line-height: 1.2; background: #f9f9f9;"> 1 </td>
      <td data-th="Qty" class="numbers" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; padding: 3px 9px; text-align: left; vertical-align: top; font-size: 0.7rem; border-bottom: 1px solid #999; line-height: 1.2; background: #f9f9f9;"> 1 </td>
      <td data-th="Status" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; padding: 3px 9px; vertical-align: top; text-align: left; font-size: 0.7rem; border-bottom: 1px solid #999; line-height: 1.2; background: #f9f9f9;">Pending </td>
    </tr>
    <!--This part may get repeated-->
    
  </tbody>
</table>

                                          </td>
<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; padding: 0;">
                                          </td>
</tr>
                                       </tbody></table>
                                    </td>
                                 </tr>
                                 <tr>
                                    <td class="two-column" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; padding: 0; text-align: center; font-size: 0;">
                                       <!--[if (gte mso 9)|(IE)]>
                                       <table width="100%">
                                          <tr>
                                             <td width="50%" valign="top">
                                                <![endif]-->
                                                <div class="column" style="width: 100%; max-width: 260px; display: inline-block; vertical-align: top; margin: 15px 0;">
                                                   <table width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0; font-family: sans-serif; color: #333333;">
                                                      <tbody><tr>
                                                         <td class="inner" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; padding: 0;">
                                                            <table class="contents" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0; font-family: sans-serif; color: #333333; width: 100%; font-size: 14px; text-align: left;">
                                                               <tbody><tr>
                                                                  <td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; padding: 0;">
                                                                     <p class="h3" style="font-family: 'OpenSans', Verdana, Arial !important; font-weight: bold; word-break: normal!important; margin: 0; font-size: 14px; margin-bottom: 4px; color: #800080;">Shipping Address:</p>
                                                                     <p style="text-transform: capitalize; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; margin: 0;"><span class="no-link"></span></p>
                                                                  </td>
                                                               </tr>

                                                            </tbody></table>
                                                         </td>
                                                      </tr>
                                                   </tbody></table>
                                                </div>
                                                <!--[if (gte mso 9)|(IE)]>
                                             </td>
                                             <td width="50%" valign="top">
                                                <![endif]-->
                                                <div class="column" style="width: 100%; max-width: 260px; display: inline-block; vertical-align: top; margin: 15px 0;">
                                                   <table width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0; font-family: sans-serif; color: #333333;">
                                                      <tbody><tr>
                                                         <td class="inner" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; padding: 0;">
                                                            <table class="contents" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0; font-family: sans-serif; color: #333333; width: 100%; font-size: 14px; text-align: left;">
                                                               <tbody><tr>
                                                                  <td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; padding: 0;">

                                                                     <p class="h3" style="font-family: 'OpenSans', Verdana, Arial !important; font-weight: bold; word-break: normal!important; margin: 0; font-size: 14px; margin-bottom: 4px; color: #800080;">Return Address:</p>
                                                                     <p style="text-transform: capitalize; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; margin: 0;"><span class="no-link"></span></p>

                                                                  </td>
                                                               </tr>

                                                            </tbody></table>
                                                         </td>
                                                      </tr>
                                                   </tbody></table>
                                                </div>
                                                <!--[if (gte mso 9)|(IE)]>
                                             </td>
                                          </tr>
                                       </table>
                                       <![endif]-->
                                    </td>
                                 </tr>
<tr>
<td class="left-sidebar" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; padding: 0; text-align: center; font-size: 0;">

    </td>
</tr>

<tr>
<td class="one-column" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; padding: 0;">
        <table width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0; font-family: sans-serif; color: #333333;">
            <tbody><tr>
                <td class="inner contents" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; padding: 0; width: 100%; text-align: left;">
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%" style="padding: 10px 5px 0 0; border-top: 1px solid #ccc; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0; font-family: sans-serif; color: #333333;">		
<tbody><tr>
<td colspan="2" style="padding: 10px 5px 0 0; text-align: center; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important;">
<span style="font-size: 11px; color: #cccccc;">Share Us With Your Friends Today!</span>
</td>
</tr>
<tr>
<td style="padding: 10px 5px 0 0; text-align: right; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important;">
<a href="#" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-decoration: underline;"><img src="https://www.example.com/media/wysiwyg/TransactionalEmails/facebook-small-round.png" style="width: 20px; height: 20px; -ms-interpolation-mode: bicubic; border: 0; outline: none; text-decoration: none;"></a>
</td>

<td style="padding: 10px 0 0 5px; text-align: left; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important;">
<a href="#" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-decoration: underline;"><img src="https://www.example.com/media/wysiwyg/TransactionalEmails/twitter-small-round.png" style="width: 20px; height: 20px; -ms-interpolation-mode: bicubic; border: 0; outline: none; text-decoration: none;"></a>			
</td>
</tr>


<tr>
<td colspan="2" style="padding: 0; width: 100%; text-align: center; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important;">
<span style="font-size: 11px; color: #cccccc;">© 2015 All Rights Reserved.</span>
</td>
</tr>

<tr>
<td colspan="2" style="padding: 0 0 0 5px; width: 100%; text-align: center; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important;">
<a href="#" style="font-size: 11px; color: #cccccc; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-decoration: underline;">Angels For Everyone Privacy Policy</a>
</td>
</tr>

<tr>
<td colspan="2" style="padding: 0 0 0 5px; width: 100%; text-align: center; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important;">
<span style="font-size: 11px; color: #cccccc;"></span>
</td>
</tr>

<tr>
<td colspan="2" style="padding: 0 0 10px 5px; width: 100%; text-align: center; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important;">
<span style="font-size: 11px; color: #cccccc;"></span>
</td>
</tr>
</tbody></table>
                    </td>
                </tr>
            </tbody></table>
        </td>
    </tr>
</tbody></table>
</td>
<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'OpenSans', Verdana, Arial !important; font-weight: normal; word-break: normal!important; padding: 0;">
</td>
</tr>
        </tbody></table>

<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
        </div>
    </center>
</body></html>
11

I couldn’t post it all at once so here is the “head” part that goes to the above email:

   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <link href="https://fonts.googleapis.com/css?family=Open+Sans|Oswald" rel="stylesheet">
      <!--[if !mso]><!-->
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <!--<![endif]-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!--[if !mso]><!-->
      
      <!--<![endif]-->
      
      <!--[if (gte mso 9)|(IE)]>
      <style type="text/css">
         table {border-collapse: collapse;}
      </style>
      <![endif]-->
   <style type="text/css">@media all and (max-width:639px){ 
  .wrapper{ width:320px!important; padding: 0 !important; }
  .container{ width:300px!important;  padding: 0 !important; }
  .mobile{ width:300px!important; display:block!important; padding: 0 !important; }
  .img{ width:100% !important; height:auto !important; }
  *[class="mobileOff"] { width: 0px !important; display: none !important; }
  *[class*="mobileOn"] { display: block !important; max-height:none !important; }
}@media screen and (max-width: 540px) {
  table.mobile-optimised {
    word-wrap: break-word;
    font-size: 1rem;
    border: none;
  }
  table.mobile-optimised thead {
    display: none;
  }
  table.mobile-optimised td {
    display: block;
    float: left; /* ie9 and under hack */
    width: 100%;
    clear: both;
    background: #eee;
    border: none;
    padding: 10px 5px;
    box-sizing: border-box;
    font-size: 1rem;
  }
  table.mobile-optimised tbody,
  table.mobile-optimised tr {
    display: block;
  }
  .mobile-optimised td:before {
    content: attr(data-th);
    display: block;
    font-weight: bold;
    margin: 0 0 2px;
    background: #800080;
    color: #fff;
    padding: 5px;
  }
  .mobile-optimised tbody tr {
    border-bottom: 1px solid #000;
    overflow: hidden;
  }
  .item-options,
  .table-heading {
    font-size: 1rem;
  }
  .mobile-optimised .numbers {
    text-align: left;
  }
  .main-table tbody tr:nth-child(odd) td {
    background: #ccc;
  }
}</style>
</head>
12

Is this layout for an html email?

You never mentioned HTML emails before!

If this is for an html email then all bets are off as you can’t reduce tables to single columns in many email clients.

I would suggest you use a linear layout for email or two columns at most.

For emails you still have to party like it’s 1999.

1 Like
13

Learning is never ending with this website stuff!

Thanks

14

True :slight_smile: I’ve been doing it full time for nearly 20 years and there’s still so much more to learn!

15

It will be soon! smile

1 Like
16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.