Comment puis-je empêcher ma table html de s'étirer

Vous voulez probablement table-layout:fixed et réglez la largeur sur les premières cellules d'une rangée.

voir http://www.w3.org/TR/CSS2/tables.html#fixed-table-layout pour explication détaillée.

j'ai juste eu le même problème et fini par le résoudre avec ceci:

table { width: 1px; /* This ugly hack allows the table to be only as wide as necessary, breaking text on spaces to allow cells to be less wide. */ }

apparemment, le réglage de la largeur de la table à quelque chose de très petit oblige à casser le texte et prendre moins d'espace horizontal. Les mots ne seront pas cassés cependant, de sorte que le tableau finira par être au moins assez grand pour le plus grand mot de chaque colonne.

essayé et vrai sur:

Linux (Ubuntu 10.04)

• Firefox 3.6.18
• Chromium-browser 12.0.742.112 (90304) peu importe ce que cela signifie
• Konqueror 4.5.3
• SeaMonkey 2.0.11

de Windows:

• Internet Explorer 7
• Firefox 4.0.1

si quelqu'un (Je ne peux pas dans ma situation actuelle) pouvait tester cela sur dernière versions D'IE, Firefox, Chrome, Safari et Opera et laisser un commentaire ou modifier cette réponse, ce serait génial!

en supposant que vous n'avez pas d'espaces non cassants ou de texte super-long sans un espace dans la cellule, j'ai généralement eu la meilleure chance en définissant explicitement la largeur de ladite cellule via CSS (semble fonctionner mieux que de faire quelque chose comme "width='100'". Si les données dans la cellule sont juste une chaîne très longue, il n'y a pas grand chose que vous pouvez faire à part la tronquer de façon programmée, ou envelopper les données dans un div avec une largeur explicite et quelque chose comme overflow: hidden / auto (auto si vous voulez un barre de défilement horizontale ou quelque chose).

définit la largeur et la hauteur de la balise td en utilisant CSS. Ensuite, vous devez traiter avec trop-plein.

td {
  width: 40px;
  height: 20px;
}

utiliser overflow: hidden pour cacher le débordement en tant que tel:

td, th {
    overflow: hidden;
}

pour que cela fonctionne, vos étiquettes <td> ou <th> doivent avoir une largeur.

Si vous devez absolument ont la table à maintenir la mise en page, même face à des espaces insécables, alors vous aurez besoin d'utiliser:

 overflow: hidden;

cependant, je recommande contre. IMO, il est plus important d'avoir les données lisibles que la mise en page parfaite.