How can I force this table to display?

Question

Here's my scenario. I'm sending an email, and I want my footer (second table) to display - no matter what is put in the first table. However, if height is set to 100% in the first table, the footer disappears in Apple mail.

<html>
  <body>
    <table height="100%">
      *EMAIL CONTENT*
    </table>
    <table>
      *FOOTER CONTENT*
    </table>
  </body>
</html>

The first table is filling the entire space of the parent. What can I put in the SECOND table to ensure that it is always visible? I've tried variety of different things, including display:block, overflow hidden or visible, using absolute positioning to pin it to the bottom, setting a specific height for footer, and more.

Any ideas on how to force this behavior?

Using `position: fixed` will anchor it to the bottom of the screen, but would also cause the footer the overlay on top of the rest of the email content. — Paul Trozan, Jan 30 '18 at 00:07
It's not needed, that's for sure. But in the case when a user specifies height 100%, I need to ensure that we still display the footer - despite that input. — Paul Trozan, Feb 05 '18 at 19:20

score 2 · Answer 1 · answered Jan 31 '18 at 17:51

I would not use position:fixed as it is not a good css to use in any email.

I am unsure why you want to add the 100% height rule to the first table, but what you CAN do is nested tables:

<html>
   <body>
     <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
       <tr>
         <td align="center">
            <table id="table1" cellpadding="0" cellspacing="0" border="0" width="700">
               <tr>
                 <td>Content1</td>
               </tr>
            </table>
         </td>
       </tr>
       <tr>
         <td align="center">
            <table id="table2" cellpadding="0" cellspacing="0" border="0" width="700">
               <tr>
                 <td>Content1</td>
               </tr>
            </table>
         </td>
       </tr>
     </table>
   </body>
 </html>

This basic structure will solve a lot of your problems. ONLY place a 100% height on the wrapper table.

I am pretty sure this is the only way to do it. Tables inside tables. — Jaakko Uusitalo, Jan 31 '18 at 17:56

How can I force this table to display?

1 Answers1