在td中对齐html电子邮件的左右内联元素

我正在尝试对齐这些元素，如图所示

最初我使用float，然后尝试width:calc（），但发现它们会导致某些客户端出现问题

有人能提出另一个解决方案吗

<tr height="40px" bgcolor="#00a2c5">
  <td>
    <span style="padding-left:20px;color:#ffffff;display: inline-block;width: calc(50% - 40px);"><a href="#">Call 13 63 93</a></span>
    <span style="padding-right:0px;color:#ffffff;text-align:right;display:inline-block;width: calc(50% - 0px);"><a href="#">Clarendon.com.au</a></span>
  </td>
</tr>

---

请使用此HTML-无需cal或其他HTML，表格具有不同的CSS，因此在电子邮件中使用表格参数或属性。

---

我认为可能会发生这种情况，因为您将两个span标记与一个td标记一起使用。如果可能，请按如下方式更新您的结构

<table style="width: 100%; border-collapse:collapse">
    <tr height="40px" bgcolor="#00a2c5">
        <td valign="center" style="padding:10px;text-align:left">
            <a href="#">Call 13 63 93</a>
        </td>
        <td valign="center" style="padding:10px;text-align:right">
            <a href="#">Clarendon.com.au</a>
        </td>
    </tr>
</table>

---

如果可以使用div标记而不是表，那就更好了。可以像这样创建该路线

<div id="whiteDiv">
    <div id="blueDiv">
        <span id="span1"><a href="#" id="anchor1">Call 13 63 93</a></span>
        <span id="span2"><a href="#" id="anchor2">Clarendon.com.au</a></span>
    </div>
</div>


#blueDiv{
    background-color: blue;
    display: flex; 
    width: 100%;
    flex-direction: row;
    height: 50px;
    align-items: center;
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 10px;
}

#blueDiv span a{
    color: #fff;
}

#whiteDiv{
    background-color: #EAE8E8;
    height: 100px;
    display: flex; 
    align-items: center;
    justify-content: center;
    padding-left: 10px;
    padding-right: 10px;
}

#蓝蝶{
背景颜色：蓝色；
显示器：flex；
宽度：100%；
弯曲方向：行；
高度：50px；
对齐项目：居中；
证明内容：之间的空间；
左侧填充：10px；
右边填充：10px；
}
#蓝蝶跨度a{
颜色：#fff；
}
#怀特迪夫{
背景色：#EAE8E8；
高度：100px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
左侧填充：10px；
右边填充：10px；
}

我已经在代码笔里查过了