html - 文本进度条(电子邮件)

Question

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

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

但我想要在进度条中央指示的动态百分比。您是否有解决方案使其与反复无常的电子邮件客户端兼容？

谢谢

Answer 1

将文本准确地置于进度条的中心是很棘手的，因为你不能真正将任何东西放在那个表格之上 - position:absolute; 将不起作用在大多数电子邮件客户端上。

但是，您可以尝试以下方法:

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

这意味着百分比总是超过进度条的当前位置，例如:

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