Clever Geek Handbook

HTML tables: horizontal scrolling in td only when needed

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">ee@yahoo.com</div>
</td>
</tr>
</table>

This code shows horizontal scrolling in an email cell.

When the email is short, like ee@yahoo.com , it shows scrolling but it is not enabled as it is not needed and when the email is longer, say

eeeeeeeeeeeeeeeeeeeeeeeeeee@yahoo.com

allows you to scroll so you can see all email.

This is good, but I need the scrolling not to show at all when the letter is short.

How can i do this?

I tried:

overflow-x:auto;

And it doesn't show scrolling when the letter is short, but when the letter is long, it just doesn't scroll it. I think this is because there are no spaces in the letter .

+3


source to share


2 answers


Once defined overflow-x: scroll

, you are specifying that the scrollbar appears no matter what.



You must use overflow-x:auto

. Here is a working demo

+6


source


works like a charm (IE9)

<table cellpadding="2" cellspacing="0" >  
    <tr> 
    <td>Contact: </td> 
    <td width="100px"><div style="overflow:auto; width:100px">ee@yahoo.com</div> 
    </td> 
    </tr> 
</table>


http://jsfiddle.net/fUW4s/1/

+2


source






More articles:


All Articles