用边距重叠 HTML 中的 table 个单元格

Question

我正在尝试发送一个 HTML 列重叠的电子邮件。用 div 做这个没问题，但需要用 tables 做，我已经好几年没玩过 tables 了！

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

这是我目前拥有的：

<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

更新的答案

我不得不编辑这个答案，因为你添加了一个 jsfiddler link。下面的代码应该可以工作，这里是更新的 jsfiddler link: 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 创建一个 table 并使用 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;
}

Answer 2

试试下面的代码。

我刚刚创建了新的简化 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

用边距重叠 HTML 中的 table 个单元格

Overlap table cells in HTML with margins

html

overlay

html-table

cell

overlap