Question

我正在尝试为HTML电子邮件内容做好标记。我有一张桌子如下图所示。＆＃34;标签出现在td的最左边，我需要在标签之前引入一些10px的空间。我不能使用padding / margin / tr td：first-child {border-left：10px solid transparent}，因为这三个选项中的每一个都在一个或另一个电子邮件客户端（Outlook，Hotmail e.t.c）中失败。

任何人都可以帮我提供一种替代方案，在表格单元格中标记＆＃34;之前引入一些空格。

<table cellspacing="0" cellpadding="0" border="0" width="100%" id="txn-info-container" style="padding: 0px 0px 0px 0px">
    <tr>
        <td width="25">
        </td>
        <td width="550">
            <table border="0" cellpadding="0" cellspacing="0">
                <tbody>
                    <tr>
                        <td>label</td>
                        <td>Value</td>
                    </tr>
                    <tr>
                        <td>label</td>
                        <td>value</td>
                    </tr>
                    <tr>
                        <td>label</td>
                        <td>value</td>
                    </tr>
                </tbody>
            </table>
        </td>
        <td width="25">
        </td>
    </tr>
</table>

注意：宽度为550的td中的表来自CK编辑器，因此不能对此特定表进行html更改。

Answer 1

您可以尝试将text-indent: 10px;添加到单元格中，假设它们是短单词或短语，并且不会分成多行。

Answer 2

我在Litmus进行了测试，效果很好。它允许您定位嵌套表并忽略外部表。

<style>   
  table table {
    background: #f00;
    Margin-left: 10px;
    padding-left: 10px;

  }
  @media screen and (-webkit-min-device-pixel-ratio:0) {
    table table {
      background: #f0f;
      Margin-left: 0px!important;
    }
  }    
</style>

table table将定位内部表。 Margin-left和padding-left将定位每个电子邮件客户端并添加10px的剩余空间。问题是Apple Mail会同时添加两者，这会产生20px的差距。因此@media查询定位webkit并告诉它生成Margin-left: 0px;。添加background颜色用于测试目的。解决方案不需要它。

您可以尝试border-left: 10px solid transparent;作为选项。您不需要webkit @media查询。我只想给你一个轻松定位嵌套表的方法。

祝你好运。

填充，边距和css透明边框的替代方案？

2 个答案: