débordement: caché ne fonctionne pas lors de l'utilisation des tables

Je rencontre des problèmes avec de longues chaînes de texte étirer mes tables et overflow:hidden ne semble pas faire ce que j'exécute. Voici l'exemple de code que je utilise pour tester cet effet:débordement: caché ne fonctionne pas lors de l'utilisation des tables

<html> 
    <head> 
     <style type="text/css"> 
      td.scroll 
      { 
       background-color:#00FFFF; 
       width:100px; 
       height:100px; 
       overflow:scroll; 
      } 
      td.hidden 
      { 
       background-color:#00FF00; 
       width:100px; 
       height:100px; 
       overflow:hidden; 
      } 
     </style> 
    </head> 
    <body> 
     <table width="100%"> 
      <tr> 
       <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
       <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
       <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
      </tr> 
      <tr> 
       <td class="scroll">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
       <td class="scroll">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
       <td class="scroll">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
      </tr> 
      <tr> 
       <td class="hidden">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
       <td class="hidden">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
       <td class="hidden">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
      </tr> 
     </table> 
    </body> 
</html>

Une fois chargé, le texte, quelle que soit la largeur de la table, étirer pour afficher toutes la chaîne. Qu'est-ce que je suis après, c'est d'avoir une partie de la chaîne qui irait après la mesure de la cellule ne pas être affiché. Est-ce encore possible avec des tables, et si oui, qu'est-ce que je fais de mal? Le débordement ne fonctionne que sur les éléments de niveau bloc.

Source

2009-10-29 canadiancreed

Les éléments de table ne sont pas des éléments de bloc. Si vous souhaitez obtenir ces effets, placez un <div> dans la cellule du tableau et appliquez les effets au <div>.

td.scroll div { 
    background-color: #00FFFF; 
    width: 100px; 
    height: 100px; 
    overflow: scroll; 
} 

td.hidden div { 
    background-color: #00FF00; 
    width: 100px; 
    height: 100px; 
    overflow: hidden; 
}

avec:

<table width="100%"> 
<tr> 
    <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
    <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
    <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
</tr> 

<tr> 
    <td class="scroll"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
    <td class="scroll"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
    <td class="scroll"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
</tr> 

<tr> 
    <td class="hidden"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
    <td class="hidden"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
    <td class="hidden"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
</tr> 
</table>

Source

2009-10-29 14:45:51 cletus

Cela l'a fait. Merci beaucoup pour cela et sauver ce qui reste de mes cheveux! Je suppose que j'ai besoin de lire sur mon css un peu plus. – canadiancreed

C'est un aspect assez mystérieux pour CSS. La seule fois où quelqu'un le découvre, c'est quand ils ont ce problème. Croyez-moi, été fait cela. – cletus

CSS 2.1 dit que «overflow» fonctionne sur les cellules de la table. Cependant, en réalité, seul WebKit prend en charge le défilement sur les cellules. 'hidden' fonctionne bien cependant. – bobince

-1

Je ne sais pas s'il est pas censé travailler pour les cellules de table, mais idéalement vous ne voulez pas vraiment les cacher de toute façon. Je vous suggère de couper les mots longs, que vous pouvez faire facilement avec la lib suivante (ne prennent que quelques lignes de js à mettre en œuvre):

http://code.google.com/p/hyphenator/

Exemple:

http://hyphenator.googlecode.com/svn/tags/Version%202.2.0/WorkingExample.html

Source

2009-10-29 14:46:05

Pensait quelque chose de quelque chose de similaire, mais malheureusement, la décision de conception n'est pas à moi. – canadiancreed

<html> 
<head> 
<style> 
td { width: 33%; height: 2em; } 
td div { width:100%;height:100%;overflow:hidden } 
</style> 

</head> 

<body> 

<table border="1" style="width:300px;"> 
<tr><td>x</td><td><div>y</div></td><td>z</td></tr> 
<tr><td>x</td><td><div>this is going to be hidden because it is too long</div></td><td>z</td></tr> 
<tr><td>x</td><td><div>y</div></td><td>z</td></tr> 
</table> 

</body> 

</html>

Source

2009-10-29 14:55:34 bugtussle

Par défaut, le mécanisme de mise en forme automatique de la table étend la largeur de la table pour l'adapter à la largeur minimale du contenu de la cellule. Dites-lui de ne pas le faire avec la propriété table-layout:

<table width="100%" style="table-layout: fixed">

et votre exemple fonctionne comme prévu. Vous devriez probablement également supprimer le width: 100px des cellules du tableau, car cela n'a aucun sens en combinaison avec une table de 100% de largeur. (Bien que avec le plan de la table fixe, il n'a pas d'importance, car seule la première rangée de cellules ou <col> s a une incidence sur la largeur des colonnes.)

Remarque overflow: scroll ou auto ne fonctionne pas pour les cellules de tableau dans la plupart des navigateurs. (Il le fait dans WebKit.)

Source

2009-10-29 15:07:51 bobince

"Mise en page: fixe" ne change rien. La hauteur se développe toujours. Testé sur chrome qui est webkit – matteo

débordement: caché ne fonctionne pas lors de l'utilisation des tables

Répondre

Questions connexes