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

Je vais avoir des problèmes avec de longues chaînes de texte en étirant mes tables et overflow:hidden ne semble pas pouvoir faire ce que je exect. Voici l'exemple de code j'utilise pour tester cet effet:

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

Lorsqu'il est chargé, le texte, quelle que soit la largeur de la table, s'étirer pour afficher l'ensemble de la chaîne. Ce que je suis après est d'avoir une partie de la chaîne qui permettrait d'aller au-delà de la cellule de mesure de ne pas être d'affichage. Est-ce même possible avec des tables, et si oui, ce que je fais mal?

source d'informationauteur canadiancreed

css html

Dépassement de capacité ne fonctionne que sur les éléments de niveau bloc. Les éléments de la Table ne sont pas les éléments de bloc. Si vous souhaitez obtenir ces effets mis un <div> à l'intérieur de la cellule du tableau et appliquer les effets de la <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>

19

Par défaut, l'auto-table-layout mécanisme élargit la largeur de la table pour s'adapter au minimum le contenu des cellules de la largeur. Dire de ne pas le faire avec le table-layout propriété:
```
<table width="100%" style="table-layout: fixed">
```
et ton exemple fonctionne comme prévu. Vous devriez sans doute aussi supprimer le width: 100px à partir de cellules du tableau, puisque ça n'a aucun sens en combinaison avec un 100% de la largeur de la table. (Même si avec le tableau fixe, mise en page, il n'a pas d'importance, seule la première rangée de cellules ou <col>s a aucune incidence sur la largeur d'une colonne.)

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

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

-1

Vous ne savez pas si il n'est pas censé travailler pour les cellules de tableau, mais, idéalement, vous ne voulez pas vraiment de les cacher de toute façon. Je vous suggère de la césure des mots longs, vous pouvez le faire facilement avec les éléments suivants lib (seulement prendre quelques lignes de js pour mettre en œuvre):

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

Exemple:

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

Vous devez vous connecter pour publier un commentaire.