文字进度条（电子邮件）

Question

我目前正在开发模板电子邮件，我已经开发了这个：

＆＃13;

＆＃13;

<table style="border:0;" cellpadding="0" cellspacing="0" width="250">
<tr>
  <td bgcolor="#f83f83" style="width:50%; background-color:#f83f83; float:left; height:15px;"></td>
  <td bgcolor="#cccccc" style="width:50%; background-color:#cccccc; float:left; height:15px;"></td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

但我想在进度条的中心指示动态百分比。 你有一个解决方案，使它与电子邮件客户端兼容吗？

由于

Answer 1

准确地将文字集中在该进度条上是很棘手的，因为您无法在表格上放置任何 - position:absolute;赢得＆＃39;适用于大多数电子邮件客户端。

但是，您可以尝试以下方式：

＆＃13;

＆＃13;

<table style="border:0;" cellpadding="0" cellspacing="0" width="250">
<tr>
  <td bgcolor="#f83f83" style="width:50%; background-color:#f83f83; float:left; height:15px;text-align:right;">5</td>
  <td bgcolor="#cccccc" style="width:50%; background-color:#cccccc; float:left; height:15px;text-align:left;">0%</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

这意味着百分比始终超过进度条的当前位置，例如：

＆＃13;

＆＃13;

<table style="border:0;" cellpadding="0" cellspacing="0" width="250">
<tr>
  <td bgcolor="#f83f83" style="width:35%; background-color:#f83f83; float:left; height:15px;text-align:right;">3</td>
  <td bgcolor="#cccccc" style="width:65%; background-color:#cccccc; float:left; height:15px;text-align:left;">5%</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;