Question

我正在尝试制作一个重叠列的HTML电子邮件。用div做这个没问题，但是需要用表来做，而且我多年没玩桌子了！

enter image description here

我需要绿色col从顶部移位并在行底部溢出。蓝色行将具有背景图像，绿色col将为纯色背景。我已经尝试在行内嵌入一个新表并将行高于背景图像，但我想知道是否还有其他解决方案。

这就是我目前所拥有的：

<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 DEMO

Answer 2

更新的答案

因为你添加了一个jsfiddler链接，我不得不编辑这个答案。以下代码应该可以使用，这里是更新的jsfiddler链接：http://jsfiddle.net/mdzvvx3q/3/

<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 style="position: absolute; z-index: 1; bottom: 250px;">
            <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>

以下的原始答案

你应该可以用CSS做到这一点。使用tr和td＆s创建一个表，并使用position：absolute和z-index css属性。

代码如下，这是一个实例：http://jsfiddle.net/luisbox/7x98qr7y/

HTML：

<table>
    <tr class="red">
        <td>First</td>
    </tr>
    <tr class="blue">
        <td>second</td>
    </tr>
    <tr class="overlap">
        <td>overlapped</td>
    </tr>
    <tr>
        <td>blank</td>
    </tr>    
    <tr class="red">
        <td>second last</td>
    </tr>
    <tr class="red">
        <td>last</td>
    </tr>
</table>

CSS：

table{
    width: 500px;
}

tr{
    width: 100%;
    height: 30px;
}

tr.red{
    background: red;
}

tr.blue{
    background: lightblue;
}

.overlap{
    position: absolute;
    z-index: 0;
    left: 300px;
    background: green;  
    width: 200px;
    height: 60px;
    color: white;
}

使用边距重叠HTML格式的表格单元格

2 个答案: