HTML таблицы: горизонтальная прокрутка в тд только при необходимости - PullRequest
Новая
       36

HTML таблицы: горизонтальная прокрутка в тд только при необходимости

4 голосов
/ 14 марта 2012

У меня есть таблица со следующим: 

<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>

Этот код показывает горизонтальную прокрутку в ячейке электронной почты.

Когда электронное письмо короткое, например, ee@yahoo.com, прокрутка отображается, но она не включена, так как она не нужна, а когда электронное письмо длиннее, скажем,

eeeeeeeeeeeeeeeeeeeeeeeeeee@yahoo.com

прокрутка включена, чтобы вы могли видеть всю электронную почту.

Это хорошо, но мне нужно, чтобы свиток вообще не показывался, когда электронное письмо короткое.

Как я могу это сделать ??

Я пробовал: 

overflow-x:auto;

И он не показывает прокрутку при коротком письме, но когда электронное письмо длинное, оно просто обрезается без прокрутки вообще. Я думаю, это происходит потому, что в письме нет пробелов .

Ответы [ 2 ]

7 голосов
/ 14 марта 2012

Определяя overflow-x: scroll, вы указываете, что полоса прокрутки должна отображаться независимо от того, что.

Вы должны использовать overflow-x:auto. Вот рабочая демоверсия

2 голосов
/ 14 марта 2012

работает как брелок (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/

...