I have created an html signature and it looks good on desktop but on mobile the last image is breaking into a new line when it should be directly next to the social media icons. Is there something I can include in the code to make the table row not break into a new line?
Here is the code:
<style>
table {border-spacing: 0; width:500px; display:block; line-height:0; }
#container{width:500px; height:167px}
</style>
<div id="container">
<table width="500" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" bgcolor="#000"><img src="https://dl.dropboxusercontent.com/u/2693031/1.gif" width="500" height="76" style="display:block" alt="Cynthia Larenas Freelance Designer & video artist"/></td>
</tr>
<tr>
<td width="100%" bgcolor="#000"><a href="http://www.cynthialarenas.com" target="_blank"><img src="https://dl.dropboxusercontent.com/u/2693031/2.gif" width="500" height="26" style="display:block" alt="www.cynthialarenas.com"/></a></td>
</tr>
<tr>
<td width="100%" bgcolor="#000">
<a href="http://www.twitter.com/cynthialarenas" target="_blank"><img src="https://dl.dropboxusercontent.com/u/2693031/3.gif" width="57" height="68" style="display:inline" alt="Twitter"/></a>
<a href="http://www.instagram.com/cynthialarenas" target="_blank"><img src="https://dl.dropboxusercontent.com/u/2693031/4.gif" width="28" height="68" style="display:inline" alt="instagram"/></a>
<a href="http://cynthialarenasblog.tumblr.com/" target="_blank"><img src="https://dl.dropboxusercontent.com/u/2693031/5.gif" width="24" height="68" style="display:inline" alt="tumblr"/></a>
<a href="http://www.vimeo.com/cynthialarenas" target="_blank"><img src="https://dl.dropboxusercontent.com/u/2693031/6.gif" width="37" height="68" style="display:inline" alt="vimeo"/></a>
<img src="https://dl.dropboxusercontent.com/u/2693031/7.gif" width="330" style="display:inline" alt=""/>
</td>
</tr>
</table>
</div>