Les tableaux HTML: de défilement horizontale dans un td uniquement lorsque cela est nécessaire

J'ai un tableau avec les éléments suivants:

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

Ce code affiche une barre de défilement horizontale dans l'e-mail de la cellule.

Quand le message est court, comme [email protected] défilement de la montre, mais il n'est pas permis car il n'est pas nécessaire, et quand le message est plus long, disons

[email protected]

le défilement permet de sorte que vous pouvez voir l'intégralité de l'e-mail.

C'est bon, mais ce dont j'ai besoin est le livre à ne pas montrer à tous quand le message est court.

Comment puis-je faire??

J'ai essayé:

overflow-x:auto;

Et il ne montre pas le défilement quand un court e-mail, mais lorsque le mail est long, il suffit de couper il pas de scroll. Je pense que cela arrive, car il n'y a pas d'espaces dans l'e-mail.

Quel navigateur utilisez-vous. Cela fonctionne très bien pour moi sur chrome. Je dirais que vous devriez essayer overflow:auto au lieu de cela, comme cela est compatible avec IE (si c'est ce que vous utilisez)
Ouais overflow:auto est de travailler avec tous les principaux navigateurs.
Créer un violon dupliquer votre problème
En effet on trouve overflow-x:auto

OriginalL'auteur user523129 | 2012-03-14

  1. 7

    Par définition overflow-x: scroll vous êtes en indiquant, pour une barre de défilement apparaissent n'importe quoi.

    Vous devez utiliser overflow-x:auto. Ici, c'est un travail démo

    croyez-le ou pas, le problème est causé par une police de taille affectant la table. Dès que j'ai la suppression de la police-taille de l'défilement automatique fonctionne .. je suis perplexe

    OriginalL'auteur Starx

  2. 2

    fonctionne comme un charme (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.net/fUW4s/1/

    OriginalL'auteur Dementic