Forcer la largeur des colonnes des tableaux à être toujours fixe, quel que soit le contenu.

Question

J'ai un tableau html avec table-layout: fixed et un td avec une largeur déterminée. 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 autrement qu'en enveloppant 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... s'étend bien qu'elle soit explicitement définie à 50px de large.

Answer 1

Indiquez la largeur du tableau :

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

Voir jsFiddle

Answer 2

Essayez d'examiner les CSS suivants :

word-wrap:break-word;

Les navigateurs Web ne devraient pas séparer les "mots" par défaut. Ce que vous rencontrez est donc un comportement normal d'un navigateur. Vous pouvez toutefois passer outre avec la directive CSS word-wrap.

Vous devez définir une largeur pour l'ensemble du tableau, puis une largeur pour les colonnes. Selon vos besoins, "width:100% ;" devrait également convenir.

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

Answer 3

Rendez le tableau solide comme un roc AVANT le css. Déterminez la largeur de la table, puis utilisez une ligne de contrôle où chaque td a une largeur explicite, qui s'ajoute à la largeur de la balise de la table.

Si vous devez faire des centaines d'emails en html pour qu'ils fonctionnent partout, utiliser d'abord le HTML correct, puis le styliser avec les/csss permettra de contourner 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>

Permet de maintenir un tableau à 300px de large. Surveillez les images qui sont plus grandes que la largeur par des extrêmes

Answer 4

Vous pouvez ajouter un div a la td puis donnez-lui un style. Cela devrait fonctionner comme prévu.

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

Puis le css.

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

Answer 5

Vous pouvez également utiliser des pourcentages, et/ou préciser 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>

L'avantage des pourcentages est qu'ils permettent de réduire la maintenance du code : vous pouvez modifier la largeur de votre tableau sans avoir à spécifier à nouveau la largeur des colonnes.

Avertissement : Je crois savoir que la largeur des tableaux spécifiée en pixels n'est pas prise en charge par HTML 5 ; vous devez utiliser les CSS à la place.