html - 进度条(电子邮件)

Question

我目前正在开发一个模板邮件，我需要显示这种风格的进度条:

.progress {
    width:100px;
}
.progressleft {
    float: left;
    height: 15px;
}
.progressright {
   overflow: hidden;
   height: 15px;
}

<div style="position:relative;top: 20px; text-align:center; color:#ffffff;">50%</div>
<div style="width:250px">
<div id="prog4" class="progressleft" style="width:50%;text-align:center;background-color: #f83;"></div>
<div class="progressright" style="background-color: #ccc;"bgcolor="#ccc"></div>

然而，在收到带有 outlook 的电子邮件时什么也没有出现......但是当我在浏览器中打开电子邮件时，一切都完美地显示......

预先感谢您的帮助...

Answer 1

现在尝试像这样设置表格格式。

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