具有可伸缩文本块的电子邮件的Html布局

Question

我正在创建将在电子邮件中使用的以下布局，并且必须是基于表格的，不能在其中使用边距：

http://jsfiddle.net/j7eqL4h2/

特别是，我试图制作这两个表6和7：

                <!-- Table 6 -->
                <table border="0" cellpadding="0" cellspacing="0" align="right" class="deviceWidth"
                       style="height: 70px; background-color: #102312; width: 100%;">
                    <tr></tr>
                </table>
                <!-- Table 7 -->
                <table border="0" cellpadding="0" cellspacing="0" align="right" class="deviceWidth"
                       style="height: 100px; background-color: #181704; width: 100%;">
                    <tr></tr>
                </table>

出现在区域2（浅绿色）之后，而区域4应该被隐藏（例如，高度可以是0），因此区域6和7被拉到区域2（浅绿色）。现在，如果区域5中的文本变得更大（添加更多的线条）并且超出区域2，则区域4出现并且其高度变得更大，同时向下推动区域6和7。

我认为布局的结构必须以某种方式改变，但不能让它发挥作用。我怎样才能产生这种效果？谢谢你的帮助。