HTML 中的表格单元格与边距重叠

Question

我正在尝试制作一封列重叠的 HTML 电子邮件。用 div 来做到这一点没有问题，但需要用桌子来做到这一点，而且我已经很多年没有玩桌子了！

我需要将绿色的列从顶部移开并溢出到行的底部。蓝色行将有一个背景图像，绿色列将是纯背景色。我尝试在行内嵌套一个新表，并使该行比背景图像更高，但我想知道是否还有其他解决方案。

这就是我目前所拥有的：

http://jsfiddle.net/mdzvvx3q/

<table width="800" border="0" cellspacing="0">
  <tr>
    <td height="98" colspan="2" style="background-color: #efefef;"></td>
  </tr>
  <tr height="400" style="background-color: #f0c;">
    <td colspan="2">
        <table height="400" width="800" border="0" cellspacing="0">
          <tr>
            <td height="100" colspan="2">Some text here</td>
          </tr>
          <tr>
            <td width="500" height="278"></td>
            <td width="300" style="background-color: #0fc;">More text here</td>
          </tr>
        </table>
    </td>
  <tr>
    <td height="98" colspan="2" style="background-color: #efefef;"></td>
  </tr>
</table>

Answer 1

尝试下面的代码。

我刚刚创建了新的简化 HTML 结构并应用了内联样式。

如果您正在尝试创建电子邮件模板。您应该使用内联样式。电子邮件模板不支持内部和外部样式表。

<table style="width: 500px;" cellpadding="10" cellspacing="0">
    <tr style="background: #FF888A;">
        <td width="50%">First</td>
        <td></td>
    </tr>
    <tr style="background: #00C6FF;">
        <td colspan="2">First</td>
    </tr>
    <tr>
        <td style="background: #00C6FF;">First</td>
        <td style="background:#00FF95;">Overlay content</td>
    </tr>
    <tr>
        <td style="background: #00C6FF;">First</td>
        <td style="background:#00FF95;"></td>
    </tr>
    <tr>
        <td style="background: #fff;">First</td>
        <td style="background:#00FF95;"></td>
    </tr>
    <tr style="background: #fff;">
        <td colspan="2">First</td>
    </tr>
    <tr style="background: #FF888A;">
        <td colspan="2">First</td>
    </tr>
    <tr style="background: #FF888A;">
        <td colspan="2">First</td>
    </tr>
</table>

JSFiddle演示