0

I'm having trouble with getting the height of the leftmost (commented) nested table to automatically size in correspondence with the content on the right. It looks fine in Chrome, but in Word/Outlook it's not stretching.

Does anyone know how to get this working in Word/Outlook?

how it should look

how it actually looks

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title></title>
        <style>
                                                
            th, td {
                padding: 0;
            }
            
            table.border {
                border-collapse: collapse;
                border-spacing: 0;
            }
            
            .borderOutline {
                border: 4px solid #000000;
            }
                        
        </style>
    </head>
    <body>

    <table class="border" align="center" width="588" height="100%">
        <tbody>
            <tr valign="top">
                <td width="12">
                    
                    <!--PROBLEM TABLE START-->
                
                    <table class="border" width="100%" height="100%">
                        <tbody>
                            <tr bgcolor="red"><td>&nbsp;</td></tr>
                            <tr bgcolor="orange"><td>&nbsp;</td></tr>
                            <tr bgcolor="yellow"><td>&nbsp;</td></tr>
                            <tr bgcolor="green"><td>&nbsp;</td></tr>
                            <tr bgcolor="blue"><td>&nbsp;</td></tr>
                            <tr bgcolor="purple"><td>&nbsp;</td></tr>                           
                        </tbody>
                    </table>
                    
                    <!--PROBLEM TABLE END-->
                
                </td>
                
                <td width="576">
                
                    <table class="border" width="100%" height="100%">
                        <tbody>
                            <tr height="75">
                                <td class="borderOutline">
                                    
                                    <table cellspacing="20" cellpadding="20">
                                        <tbody>
                                            <tr>
                                            
                                                <td>HEADER</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                
                                </td>
                            </tr>
                            
                            <tr>
                                <td class="borderOutline">
                                    
                                    <table cellspacing="20" cellpadding="20">
                                        <tbody>
                                            <tr>
                                            
                                                <td>
                                                    <p>BODY</p>
                                                    <p>will</p>
                                                    <p>contain</p>
                                                    <p>variable</p>
                                                    <p>amount</p>
                                                    <p>of</p>
                                                    <p>text</p>
                                                </td>
                                            
                                            </tr>
                                        </tbody>
                                    </table>
                                
                                </td>
                            </tr>
                            <tr height="75">
                                
                                <td class="borderOutline">
                                
                                    <table cellspacing="20" cellpadding="20">
                                        <tbody>
                                            <tr>
                                            
                                                <td>FOOTER</td>
                                            
                                            </tr>
                                        </tbody>
                                    </table>
                                
                                </td>
                                
                            </tr>
                        </tbody>
                    </table>
                
                </td>                   
                
            </tr>
        </tbody>
    </table>

    </body>
</html>
Domo Kun
  • 3
  • 3
  • Maybe you can try to add a height statement into each tr like height="16.6%" – cagcoach Jul 28 '20 at 08:57
  • thanks @cagcoach, but unfortunately that doesn't seem to work either. neither does setting a pixel height on the problem table. microsoft is infuriating :/ – Domo Kun Jul 28 '20 at 22:49

1 Answers1

0

The problem you have is acutally quite common and annoyed a lot of people in the past. As far as I know, Word and Outlook are using the Internet Explorer Engine, so you will find the unconvinient answer in this thread:

IE display: table-cell child ignores height: 100%

(SPOILER: It's probably not possible)

cagcoach
  • 625
  • 7
  • 24
  • thanks @cagcoach - i ended up having to use dirty tricks like a transparent image to size the nested table acting as the frame, and then height = value (not percentage) statements in various td tags. the template now looks terrible in Chrome but works in Outlook. – Domo Kun Aug 06 '20 at 01:55