HTML Table : 在边框上放置图像或圆圈

Question

<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 和 内联 css 。

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

Answer 1

看看

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

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>

如果这不起作用，而不是在 table 上使用边框，请在 td o 类似的内容中使用 div 上的边框。

Answer 3

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

HTML Table : 在边框上放置图像或圆圈

HTML Table : put an image or circle on border

html

css

html-table

html-email