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

Question

我正在尝试为 HTML 电子邮件内容准备标记。我有一个 table 如下所示。 "label"s 出现在 td 的最左边，我需要在标签前引入一些 10px 的 space。我不能使用 padding/margin/tr td:first-child{border-left: 10px solid transparent} 因为这 3 个选项中的每一个在一个或另一个电子邮件客户端（Outlook、Hotmail e.t.c）中都失败了。

谁能帮我提供一个替代方案，在 table 单元格中的 "label" 之前引入一些 space。

<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 中的 table 来自 CK-Editor，因此不能对这个特定的 table 进行 html 更改。

Answer 1

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

Answer 2

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

<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 将针对内部 table。 Margin-left 和 padding-left 将针对每个电子邮件客户端并向左添加 10px space。问题是 Apple Mail 会同时添加两者，这会造成 20px 的差距。所以 @media 查询以 webkit 为目标并告诉它生成 Margin-left: 0px;。添加 background 颜色用于测试目的。解决方案不需要它。

您可以尝试 border-left: 10px solid transparent; 作为一个选项。您不需要 webkit @media 查询。我只是想为您提供一种轻松定位嵌套 table.

的方法

祝你好运。

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

Alternatives for padding, margin and transparent-border in css?

css

html-email