Mot-enroulant une longue cellule de table tout en maintenant des largeurs de dynamiques dans d'autres

Question

J'ai une table qui a une longue lignée dans l'une de ses cellules. J'ai besoin la longue ligne fractionnera de sorte qu'il ne provoque pas la table à plus de 100% de large. Je trouve qu'en ajoutant table-layout: fixed et word-wrap: word-break, il envelopper la cellule longue. Cependant, un effet secondaire de l'utilisation table-layout est qu'il provoque toutes les colonnes d'avoir la même largeur.

Vous pouvez voir un exemple de cela ici:

http://jsfiddle.net/RYdLd/2/

Comment puis-je faire la taille auto largeur de la première colonne pour adapter seulement son contenu? (À savoir Dans cet exemple, il devrait être juste assez large pour montrer la 1 et 2 dans cette colonne.)

Les données du tableau sera chargé dynamiquement, donc une solution qui les valeurs de largeur codes dur est pas bon parce qu'il n'y a aucun moyen de savoir à l'avance la largeur d'une colonne doit être. Ma seule option est d'utiliser un <table>, je ne peux pas utiliser un <div> ou un autre élément.

Answer 1

Selon la spécification officielle , lorsque vous utilisez un table-layout fixe, les largeurs de colonne de la première rangée de déterminer les largeurs de colonnes de la table entière. Si aucun d'entre eux sont définis, il distribuera la largeur des colonnes uniformément.

Comme il ne semble pas être une autre option, je fini par utiliser la méthode suivante:

1. Le chargement des données dans la table tandis que le table-layout est réglé sur auto.
2. Lecture de la largeur des colonnes que je veux être dynamique.
3. Réglage de ces largeurs de colonnes à leurs valeurs actuelles.
4. Modification du table-layout à fixe.

Voici un exemple qui est pas parfait (la largeur se diminuée d'un bit):

http://jsfiddle.net/RYdLd/7/

Answer 2

Je découvre cela tout en luttant avec le même problème:

Réglage rupture mot sur un élément correspond exactement à l'insertion d'un espace de largeur nulle entre chaque caractère du texte contenu dans cet élément.

Sauf que cela fonctionne en fait avec des tables dynamiques normales,

Cette solution est très rapide, car il ne nécessite pas de Javascript.

(Il pourrait cependant être utilisé de Javascript si désiré. Trouver toutes les cellules avec pause-mot, saisir tous les nœuds de texte enfant, et insérez un entre chaque caractère espace zéro largeur. Même alors, le script serait exécuté qu'une seule fois au cours de chargement de la page, ce qui devrait encore être très performant.)

espace de largeur nulle est ​

Answer 3

Vous pouvez utiliser:. Style css mot-wrap pour briser les longues phrases

word-wrap: break-word

Answer 4

Il est facile de poignée / envelopper longs mots DIV et tables fixes ( table-layout: fixed ) - il suffit d'appliquer CSS3 < em> word-wrap. pause-mots

Dans les tableaux dynamiques ci-dessus la propriété ne fait que la moitié du travail. Nous avons besoin de plus d'aider les navigateurs à trouver des points de rupture.

Un peu explication plus détaillée se trouve dans l'article .