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

Question

我正在尝试为 HTML 电子邮件内容准备标记。我有一张如下图所示的表格。 “标签”出现在 td 的最左侧，我需要在标签之前引入一些 10px 的空间。我不能使用 padding/margin/tr td:first-child{border-left: 10px solid transparent} 因为这三个选项中的每一个都在一个或另一个电子邮件客户端（Outlook、Hotmail 等）中失败。

谁能帮我提供一个替代方案，在表格单元格中的“标签”之前引入一些空格。

<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-Editor，因此无法对该特定表格进行 html 更改。

Answer 1

我在 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 将针对每个电子邮件客户端并添加 10 像素的剩余空间。问题是 Apple Mail 会同时添加两者，这会产生 20 像素的间隙。所以@media 查询以 webkit 为目标并告诉它生成Margin-left: 0px;。添加background 颜色用于测试目的。解决方案不需要它。

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

祝你好运。

Answer 2

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