HTML таблицы: поместить изображение или круг на границе

<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: использование Cant»div, должны придерживаться table и инлайн CSS только.

(я, сделав HTML Emailer)

источник

2016-08-30 Anonymous

Какие решения вы уже пробовали? –

Я пробовал 'border-image'. но это не сработало. –

Outlook не поддерживает position. поэтому он не будет работать в перспективе. если у вас есть статический контент, вы можете создать тот же тип изображения и поместить его в свой код.

источник

2016-09-21 06:00:17

Взгляните

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

источник

2016-08-30 08:18:18

cant 'использовать 'position' свойство. поскольку я делаю HTML-почтовый клиент. должны придерживаться только 'table' и ** inline css **. –

Вы можете сделать это с помощью встроенного css слишком –

да .. но я не могу использовать свойство 'position'. поскольку некоторые почтовые клиенты не отображают свойство 'position'. –

Это похоже на работу, но вы должны попробовать с почтовым клиентом: 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>

Если это не работает, а не использует границу на столе, используйте границу на div внутри td o нечто подобное.

источник

2016-08-30 08:42:15

спасибо .. но он не работал в почтовом клиенте. кружок переместился из желаемого места –

HTML таблицы: поместить изображение или круг на границе

ответ

Смежные вопросы