I have a table with the following:

<table  cellpadding="2" cellspacing="0" > 
<tr>
<td>Contact: </td>
<td width="100px"><div style="overflow-x:scroll; width:100px">[email protected]</div>
</td>
</tr>
</table>

This code shows an horizontal scroll in the email cell.

When the email is a short one like [email protected] the scroll shows but it is not enabled as it is not needed, and when the email is longer let's say

[email protected]

the scroll enables so you can see the entire email.

This is good, but what I need is the scroll not to show at all when the email is a short one.

How can I do that??

I've tried:

overflow-x:auto;

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. I think this happens because there are no spaces in the email.

I have a table with the following:

<table  cellpadding="2" cellspacing="0" > 
<tr>
<td>Contact: </td>
<td width="100px"><div style="overflow-x:scroll; width:100px">[email protected]</div>
</td>
</tr>
</table>

This code shows an horizontal scroll in the email cell.

When the email is a short one like [email protected] the scroll shows but it is not enabled as it is not needed, and when the email is longer let's say

[email protected]

the scroll enables so you can see the entire email.

This is good, but what I need is the scroll not to show at all when the email is a short one.

How can I do that??

I've tried:

overflow-x:auto;

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. I think this happens because there are no spaces in the email.

• javascript
• css
• scroll
• html-table
• cell

• 1 Which browser are you using. This works fine for me in chrome. I would say you should try overflow:auto instead, as that is patible with IE (if that is what you are using) – Andrew Commented Mar 14, 2012 at 9:18
• Yeah overflow:auto is working with all major browsers. – anothershrubery Commented Mar 14, 2012 at 9:21
• Create a fiddle duplicating your issue – Starx Commented Mar 14, 2012 at 9:23
• Actually so is overflow-x:auto – anothershrubery Commented Mar 14, 2012 at 9:23

2 Answers 2

By defining overflow-x: scroll you are indicating for a scroll bar to appear no matter what.

You should use overflow-x:auto. Here is a working demo

works like a charm (IE9)

<table cellpadding="2" cellspacing="0" >  
    <tr> 
    <td>Contact: </td> 
    <td width="100px"><div style="overflow:auto; width:100px">[email protected]</div> 
    </td> 
    </tr> 
</table> 

http://jsfiddle/fUW4s/1/