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

【问题标题】：HTML Table : put an image or circle on borderHTML表格：在边框上放置图像或圆圈
【发布时间】：2016-09-21 14:00:17
【问题描述】：

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

我想在left border的开头放一个图片或圆圈。

就像在图片中一样。

PS：不能使用 div ，必须坚持 table 和 inline css ，只有。

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

【问题讨论】：

到目前为止您尝试了哪些解决方案？
我试过border-image。但它没有用。

标签： html css html-table html-email

【解决方案1】：

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

【讨论】：

【解决方案2】：

看看

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

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

【讨论】：

不能使用position 属性。因为我正在制作 HTML 电子邮件。必须坚持使用 table 和 inline css。
你也可以用内联css来做
是的.. 但我不能使用position 属性。因为某些电子邮件客户端不呈现 position 属性。
在这种情况下，您也可以使用负边距

【解决方案3】：

这似乎可行，但您必须尝试使用电子邮件客户端： 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 内的 div 上使用边框或类似的东西。

【讨论】：

谢谢您.. 但它在电子邮件客户端中不起作用。圆圈从所需位置移开