HTML表格：在边框上放置图像或圆圈

Question

＆＃13;

＆＃13;

<table>
  <tr>
    <td  valign="top" align="center" style=" padding-left: 30px; padding: 10px; border-left: thin gray solid; ">
      <p style="padding-left: 50px; text-align: left; font-weight: 600;"> 
        <span style="color: #ee163a; font-size: 12px;">08:30 am - 09:30 am</span><br>
        <span style="color: black; font-size: 10px;">Tea, Registration and Networking </span>
      </p>
    </td>
  </tr>      
</table>

＆＃13;

＆＃13;

＆＃13;

我想在left border的首字母上添加图片或圆圈。

就像在图像中一样。

PS：Cant＆＃39;使用div，必须坚持table和内联css 。

（我正在制作HTML电子邮件）

Answer 1

看看

Image

Answer 2

这似乎有效，但您必须尝试使用​​电子邮件客户端： https://jsfiddle.net/L6sc9smp/

<table>
  <tr>
    <td  valign="top" align="center" style=" padding-left: 30px; padding: 10px; border-left: thin gray solid; ">
    <div style="width:15px; height:15px; background: red; border-radius:100%; margin-left:-10px">

    </div>
      <p style="padding-left: 50px; text-align: left; font-weight: 600;"> 
        <span style="color: #ee163a; font-size: 12px;">08:30 am - 09:30 am</span><br>
        <span style="color: black; font-size: 10px;">Tea, Registration and Networking </span>
      </p>
    </td>
  </tr>      
</table>

如果这不起作用而不是在表格上使用边框，请在td o内部的div上使用border。

Answer 3

Outlook不支持position属性。所以它在outlook中不起作用。如果您有静态内容，那么您可以创建相同类型的图像并将其放入代码中。