title: HTML tables: horizontal scroll in a td only when needed
body: <p>I have a table with the following: </p>
  
  <pre><code>&lt;table  cellpadding="2" cellspacing="0" &gt; 
  &lt;tr&gt;
  &lt;td&gt;Contact: &lt;/td&gt;
  &lt;td width="100px"&gt;&lt;div style="overflow-x:scroll; width:100px"&gt;ee@yahoo.com&lt;/div&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>This code shows an horizontal scroll in the email cell. </p>
  
  <p>When the email is a short one like ee@yahoo.com the scroll shows but it is not enabled as it is not needed, and when the email is longer let's say </p>
  
  <p>eeeeeeeeeeeeeeeeeeeeeeeeeee@yahoo.com </p>
  
  <p>the scroll enables so you can see the entire email. </p>
  
  <p>This is good, but what I need is the scroll not to show at all when the email is a short one. </p>
  
  <p>How can I do that?? </p>
  
  <p>I've tried: </p>
  
  <pre><code>overflow-x:auto;
  </code></pre>
  
  <p>And it does not show the scroll when a short email but when the email is a long one it just cut it no scroll at all.  <strong>I think this happens because there are no spaces in the email</strong>. </p>