html подпись вертикально сплит tr

Я делаю электронную почту sig с html и таблицами. Я почти там, но мне нужна рука с последним битком.html подпись вертикально сплит tr

Я хочу, чтобы социальные иконки справа. Я добавил скриншоты и вот код.

<table> <tr> <td valign="top" style="padding:0 8px 0 0;"><img src="" style="max-height:80px" width="76" height="80"></td> <td style="font-size:80%;font-family:Arial;padding:0; min-width:240px;" valign="top"> <div style="color:#111111;font-size:1.4em;">Name</div> <span style="color:#111111;"><strong style="color:#111111;font-size:1em">Director</strong>,</span> <span style="color:#111111;font-size:1em;">Company</span> <div style="line-height:0.4em;font-size:0.4em;"> &nbsp; </div> <div><span style="color:#00c4b4;font-size:1em;">mobile:&nbsp;</span><span style="color:#111111;font-size:0.9em;">07777777777</span></div> <div><span><a href="https://www." target="_blank" style="color:#00c4b4;text-decoration:none;font-size:1em;">www.website.com</a></span></div> </td> <td style= "border-left:2px solid;padding:0 0 3px 6px;width:42px;border-color:#00c4b4;"valign="middle"> </td> </tr>   <tr> 
     <td><img src="https://htmlsigs.s3.amazonaws.com/logos/files/000/747/072/landscape/facebook-5-128_1_.png" style="max-height:40px" width="40" height="40"></td> 
    </tr> 
    <tr> 
     <td><img src="https://htmlsigs.s3.amazonaws.com/logos/files/000/747/073/landscape/linkedin-5-128_1_.png" style="max-height:40px" width="40" height="40"></td> 
    </tr></table>

how i want it to look

источник

2016-12-13 user3080228

https://jsfiddle.net/gvvL7f4p/ Для того, чтобы уменьшить разрыв между изображениями и границами, установить нужную ширину к предыдущому ТДУ (с зеленой границей, он слишком широк сейчас, 42px) и выравнивание изображений влево .. Например, вот так: https://jsfiddle.net/gvvL7f4p/1/ – sinisake

Огромное спасибо! – user3080228

Вам нужно разделить правильный тд 2 строки. Вот скорректированный код.

<table> 
<tr> 
<td rowspan="2" valign="top" style="padding:0 8px 0 0;"><img src="" style="max-height:80px" width="76" height="80"></td> 
<td rowspan="2" valign="top" style="font-size:80%;font-family:Arial;padding:0; min-width:240px; border-right:2px solid; border-color:#00c4b4;"> 
<div style="color:#111111;font-size:1.4em;">Name</div> 
<span style="color:#111111;"><strong style="color:#111111;font-size:1em">Director</strong>,</span> 
<span style="color:#111111;font-size:1em;">Company</span> 
<div style="line-height:0.4em;font-size:0.4em;"> &nbsp; </div> 
<div> 
<span style="color:#00c4b4;font-size:1em;">mobile:&nbsp;</span> 
<span style="color:#111111;font-size:0.9em;">07777777777</span> 
</div> 
<div> 
<span> 
<a href="https://www." target="_blank" style="color:#00c4b4;text-decoration:none;font-size:1em;">www.website.com</a> 
</span> 
</div> 
</td> 
<td style= "padding:0 0 3px 6px;width:42px;"valign="middle"> 
<img src="https://htmlsigs.s3.amazonaws.com/logos/files/000/747/072/landscape/facebook-5-128_1_.png" style="max-height:40px" width="40" height="40"> 
</td> 
</tr> 
<tr> 
<td style= "padding:0 0 3px 6px;width:42px;"valign="middle"> 
<img src="https://htmlsigs.s3.amazonaws.com/logos/files/000/747/073/landscape/linkedin-5-128_1_.png" style="max-height:40px" width="40" height="40"> 
</td> 
</tr>   
</table>

источник

2016-12-13 11:52:21 Harsha

ответ

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