html - 电子邮件模板中的内联定位

标签 html css email html-email inline

谁能帮我找到一种替代方法来在电子邮件模板中创建以下功能。 Inline position styling is being removed from the template .

table {
   width: 80%;
   border-spacing: 0;
}

table tr td.label-dots {
    position: relative;
    overflow: hidden;
    background-color: red;
}

table tr td.label-dots span {
    position: absolute;
    overflow: hidden;
    white-space: nowrap;
}

table tr td:not(.label-dots) {
    background-color: blue;
}
<table>

    <tr>
    
        <td class="label-dots">Label<span>...................................................................................................................</span></td>
        <td>$9.99</td>
        
    </tr>

</table>

screenshot of the desired bottom border effect

最佳答案

这适用于每个电子邮件客户端:

border: 1px dotted #000000;

例子:

<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="400" style="margin: 0 auto;">
  <tr>
   <td width="50">Item</td>
   <td width="300" style="border-bottom: 1px dotted #000000;">&nbsp;</td>
   <td width="50">Price</td>
  </tr>
</table>    
<table>

关于html - 电子邮件模板中的内联定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54150872/

相关文章:

java - 用于第三方集成的两种方式密码加密

node.js - 错误 : connect ECONNREFUSED 127. 0.0.1:465 nodemailer

javascript - 如何使用html2canvas和jspdf以正确和简单的方式导出为pdf

javascript - 如何在不改变内部div位置的情况下换行多个div

css - 使用 > 和不使用 CSS 的区别

css - 样式输入类型=文件未按预期工作

Python 3.4 电子邮件

html - 首选/最小高度

css - 调整浏览器窗口大小时标题分开

css - 如何将元素添加到 Bootstrap 下拉列表项