CODEWITHSUNDEEP
htmlcssemailhtml-emailinline
iRector
iRector

Reputation: 1984

Inline Positioning in Email Template

Can anyone help me find an alternative way to create the below functionality in an email template. 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

Upvotes: 0

Views: 74

Answers (1)

gwally
gwally

Reputation: 3547

This works in every email client:

border: 1px dotted #000000;

Example:

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

Upvotes: 1

Related Questions