I'm struggling to make the height of the leftmost (commented) nested table adjust automatically based on the content in the right section. It displays correctly in Chrome, but does not stretch in Word/Outlook.
Any ideas on how to fix this for Word/Outlook?
<!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> </td></tr>
<tr bgcolor="orange"><td> </td></tr>
<tr bgcolor="yellow"><td> </td></tr>
<tr bgcolor="green"><td> </td></tr>
<tr bgcolor="blue"><td> </td></tr>
<tr bgcolor="purple"><td> </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>