Responsive design 电子邮件模板3响应栏

我想创建一个包含3个响应栏的电子邮件模板

我知道我必须使用它，但问题是，右边和左边的列的流体大小总是100%，没有中间列的大小

First Column    Middle Column    Second Column
   100%            800px            100%
 only Image        Text            only Image
 stretch to                        strech to
 fullwidth                         fullwidth

所以我的问题是，我有这三列，但是，图像在Outlook和其他程序中不会拉伸

这是我的代码：

<table cellpadding="0" cellspacing="0" border="0" bordercolor="" width="100%" bgcolor="">
  <tr>
    <td>
      <table width="100%" align="center" bgcolor="#efefef" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td align="center" valign="top" bgcolor="#e0e0e0" class="wrapTemp" width="100%" bgcolor="red" style="background: #2d2d2d">
            <table cellpadding="0" cellspacing="0" border="0" bordercolor="0" bgcolor="" width="100%">
              <tr>
                <td class="xhideOnMediaQuery">
                  <img order="0" class="teaserImageX" src="../assets/header_bg_left_right.jpg" width="100%" height="125" />
                </td>
                <td valign="top" align="center" class="wrapHead" width="800" style="padding: 0; padding">
                  <table border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="">
                    <tr>
                      <td cellpadding="0" cellspacing="0" align="top" valign="center">
                        <table border="0" class="wrapTemp" width="100%" cellpadding="0" cellspacing="0" bgcolor="#262626">
                          <tr>
                            <td class="hideOnMobile" width="10"><img style="display: block;" border="0" src="../assets/spacer.gif" width="10" height="2" /></td>
                            <td><img style="display: block;" border="0" src="../assets/logo.jpg" width="140" height="125" /></td>
                            <td class="hideOnMobile" width="10"><img style="display: block;" border="0" src="../assets/spacer.gif" width="10" height="2" /></td>
                          </tr>
                        </table>
                      </td>
                      <td align="top" valign="center">
                        <table border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="#2d2d2d">
                          <tbody>
                            <tr>
                              <td width="1"><img style="display: block;" border="0" src="../assets/header_bg.jpg" width="1" height="49" /></td>
                              <td>
                                <table border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="">
                                  <tr>
                                    <td>
                                      <table border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="#212121">
                                        <tbody>
                                          <tr>
                                            <td width="1" bgcolor="#212121" style="line-height: 34px;"><img style="display: block;" border="0" src="../assets/spacer.gif" width="1" height="34" /></td>
                                            <td class="headerPadding20" bgcolor="#212121" align="right" valign="bottom"><a href="#" target="_balnk" style="color: #626262; text-decoration: none; font-size: 13px; font-family: Arial, sans-serif; line-height: 100%; text-align: right;">View Web Version</a></td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td style="line-height: 15px;"><img class="shadowImage" style="display: block;" border="0" src="../assets/header_bg_bottom.jpg" width="100%" height="15" /></td>
                                  </tr>
                                </table>
                              </td>
                            </tr>
                            <tr>
                              <td width="1" bgcolor="#2d2d2d"><img style="display: block;" border="0" src="../assets/spacer.gif" width="1" height="76" /></td>
                              <td class="headerPadding20" valign="middle" align="right" bgcolor="#2d2d2d" style="font-size: 14px; font-family: Arial, sans-serif; line-height: 14px; color: #cdcdcd;"><strong>Newsletter</strong> &ndash; September, 2015</td>
                            </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                </td>
                <td class="xhideOnMediaQuery">
                  <img order="0" class="teaserImageX" src="../assets/header_bg_left_right.jpg" width="100%" height="125" />
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<table width="100%" align="center" bgcolor="#efefef" border="0" cellpadding="0" cellspacing="0" class="wrapTemp">

---

这就是你想要的样子吗？我使用width:calc将左右列设置为剩余宽度的100%