Forcer les largeurs de colonne de table à toujours être fixes quel que soit le contenu

J'ai une table html avec table-layout: fixedet un td avec une largeur définie. La colonne se développe toujours pour contenir le contenu du texte qui ne contient pas d'espace. Existe-t-il un moyen de résoudre ce problème autre que d'encapsuler le contenu de chaque td dans un div?

Exemple: http://jsfiddle.net/6p9K3/29/

<table>
    <tbody>
        <tr>
            <td style="width: 50px;">Test</td>
            <td>Testing 1123455</td>
        </tr><tr>
            <td style="width: 50px;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
            <td>B</td>
        </tr>
    </tbody>
</table>

table
{
    table-layout: fixed;
}

td
{
    border: 1px solid green;
    overflow: hidden;
}

Dans l'exemple, vous pouvez voir que la colonne avec AAAAAAAAAAAA ... se développe bien qu'elle soit explicitement définie sur 50 px de large.

Spécifiez la largeur du tableau:

table
{
    table-layout: fixed;
    width: 100px;
}

Voir jsFiddle

Essayez de regarder dans le CSS suivant:

word-wrap:break-word;

Les navigateurs Web ne doivent pas interrompre les «mots» par défaut, de sorte que vous rencontrez un comportement normal d'un navigateur. Cependant, vous pouvez remplacer cela avec la directive CSS word-wrap.

Vous devrez définir une largeur sur le tableau global puis une largeur sur les colonnes. "largeur: 100%;" devrait également être OK en fonction de vos besoins.

L'utilisation de la fonction Word-wrap n'est peut-être pas ce que vous voulez, mais elle est utile pour afficher toutes les données sans déformer la mise en page.

Rendre la table solide comme le roc AVANT le css. Calculez la largeur de votre tableau, puis utilisez une ligne de «contrôle» dans laquelle chaque td a une largeur explicite, qui s'ajoutent à la largeur de la balise table.

Devoir faire des centaines d'e-mails html pour travailler partout, en utilisant d'abord le bon HTML, puis le style w / css contournera de nombreux problèmes dans tous les IE, webkit et mozillas.

donc:

<table width="300" cellspacing="0" cellpadding="0">
  <tr>
    <td width="50"></td>
    <td width="100"></td>
    <td width="150"></td>
  </tr>
  <tr>
    <td>your stuff</td>
    <td>your stuff</td>
    <td>your stuff</td>
  </tr>
</table>

Gardera une table à 300px de large. Regardez des images plus grandes que la largeur par des extrêmes

Vous pouvez ajouter un divau td, puis le styliser. Cela devrait fonctionner comme prévu.

<td><div>AAAAAAAAAAAAAAAAAAA</div></td>

Puis le css.

td div { width: 50px; overflow: hidden; }

Vous pouvez également travailler avec "overflow: hidden" ou "overflow-x: hidden" (uniquement pour la largeur). Cela nécessite une largeur définie (et / ou une hauteur?) Et peut-être aussi un "display: block".

"Overflow: Hidden" masque tout le contenu, qui ne rentre pas dans la zone définie.

Exemple:

http://jsfiddle.net/NAJvp/

HTML:

<table border="1">
    <tr>
        <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
        <td>bbb</td>
        <td>cccc</td>
    </tr>
</table>

CSS:

td div { width: 100px; overflow-y: hidden; }

EDIT: Honte à moi, je l'ai vu, vous utilisez déjà le "débordement". Je suppose que cela ne fonctionne pas, car vous ne définissez pas "display: block" sur votre élément ...

J'essaierais de le régler sur max-width: 50px;

Vous pouvez également utiliser des pourcentages et / ou spécifier dans les en-têtes de colonne:

<table width="300">  
  <tr>
    <th width="20%">Column 1</th>
    <th width="20%">Column 2</th>
    <th width="20%">Column 3</th>
    <th width="20%">Column 4</th>
    <th width="20%">Column 5</th>
  </tr>
  <tr>
    <!--- row data -->
  </tr>
</table>

Le bonus avec les pourcentages est une moindre maintenance du code: vous pouvez modifier la largeur de votre table sans avoir à redéfinir la largeur des colonnes.

Mise en garde: Je crois comprendre que la largeur du tableau spécifiée en pixels n'est pas prise en charge dans HTML 5; vous devez utiliser CSS à la place.

Cela fonctionne pour moi

td::after { 
content: ''; 
display: block; 
width: 30px;
}