html署名垂直に分割tr

私は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である）前のTDへの画像と境界との間のギャップ、セット所望の幅を減少させ、左の画像を整列させます..例えば、このように：https://jsfiddle.net/gvvL7f4p/1/ – sinisake

すごくおかげで！ – user3080228

あなたは2行に右のTDを分割する必要があります。ここに訂正されたコードがあります。

<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

答えて

関連する問題