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

【问题标题】：Overlap table cells in HTML with marginsHTML 中的表格单元格与边距重叠
【发布时间】：2015-03-21 07:23:48
【问题描述】：

我正在尝试编写包含重叠列的 HTML 电子邮件。用 div 做这个没问题，但需要用表格来做，而且我已经好几年没玩过表格了！

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

这是我目前拥有的：

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

【问题讨论】：

您能把您的 HTML 代码发布在一个工作小提琴中吗？
当然。这是代码。仍然是空的，但这就是我所拥有的。 jsfiddle.net/mdzvvx3q

标签： html html-table overlay cell overlap

【解决方案1】：

更新答案

自从您添加了 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 创建一个表，并使用 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;
}

【讨论】：

在使用它自己的 fiddler 编辑帖子之前创建了这个 jsfiddler
永远不要尝试在表格单元格或行上，甚至在表格单元格或行内使用绝对定位。结果将有太多跨浏览器和设备问题，无法全部解决。相反，我建议在一个大表格单元格中创建一些 div 来模拟所需的行为。
我同意，但看起来 div 不是一个选项。不知道为什么。

【解决方案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

【讨论】：