Comment définir la largeur des cellules de la table au minimum, sauf la dernière colonne?

J’ai une table avec 100% de largeur. Si je mets

s dedans, ils se répartissent avec des colonnes de même longueur. Cependant, je souhaite que toutes les colonnes sauf la dernière aient une largeur aussi petite que possible, sans envelopper le texte.

Ce que j’ai fait d’abord, c’est que j’ai défini width="1px" dans tous les

s sauf le dernier (bien qu’il soit obsolète, mais que le style="width:1px" n’ait aucun effet), données de mots dans la colonne. Dans ce cas, pour garder la longueur aussi petite que possible, il a enveloppé mon texte.

Laissez-moi démontrer. Imaginez ce tableau:

 --------------------------------------------------------------------------------- element1 | data | junk here | last column --------------------------------------------------------------------------------- elem | more data | other stuff | again, last column --------------------------------------------------------------------------------- more | of | these | rows --------------------------------------------------------------------------------- 

Quoi que j’essaye, ce que je continue à obtenir est soit ceci:

 --------------------------------------------------------------------------------- element1 | data | junk here | last column --------------------------------------------------------------------------------- elem | more data | other stuff | again, last column --------------------------------------------------------------------------------- more | of | these | rows --------------------------------------------------------------------------------- 

ou (même si j’ai défini style="whitespace-wrap:nowrap" ) ceci:

 --------------------------------------------------------------------------------- | | junk | last element1 | data | | | | here | column --------------------------------------------------------------------------------- | more | other | again, elem | | | last | data | stuff | column --------------------------------------------------------------------------------- more | of | these | rows --------------------------------------------------------------------------------- 

Je veux obtenir la table que j’ai présentée en premier. Comment puis-je y arriver? (Je préfère m’en tenir à la norme et utiliser CSS. Honnêtement, je ne m’inquiète pas si IE n’a pas implémenté une partie de la norme non plus)

Plus d’explication: Ce dont j’ai besoin est de garder les colonnes aussi courtes que possible sans envelopper les mots (la dernière colonne doit être aussi grande que nécessaire pour que la largeur de la table atteigne 100%). Si vous connaissez LaTeX, ce que je veux, c’est comment les tables apparaissent naturellement dans LaTeX lorsque vous définissez leur largeur à 100%.

Note: J’ai trouvé ça mais ça me donne toujours la même chose que le dernier tableau.

whitespace-wrap: nowrap n’est pas valide css. C’est white-space: nowrap vous cherchez.

Cela fonctionne au moins dans Google Chrome. ( jsFiddle )

HTML:

 
element1 data junk here last column
elem more data other stuff again, last column
more of these rows

CSS:

 table { border: 1px solid green; border-collapse: collapse; width:100%; } table td { border: 1px solid green; } table td.shrink { white-space:nowrap } table td.expand { width: 99% } 
 td:not(:last-child){ white-space: nowrap; } td:last-child{ width: 100%; } 

En utilisant le code ci-dessus, la dernière cellule du tableau essaiera d’être la plus grande possible, et vous éviterez que les précédentes ne s’emballent. Cela fait la même chose que les autres réponses données, mais beaucoup plus efficace.

Sujet légèrement différent mais peut-être que cela aide quelqu’un qui trébuche sur cette question comme moi.
(Je viens de voir le commentaire de Campbeln qui suggère exactement cela après avoir écrit ma réponse ci-dessous, donc c’est une explication détaillée de son commentaire)

J’ai eu le problème inverse: je voulais définir une colonne de table à la largeur minimale possible sans la casser dans les espaces blancs (dernière colonne dans l’exemple suivant), mais la largeur de l’autre devrait être dynamic (y compris les sauts de ligne):

 ----------------------------------------------------------------------------------- element1 | data | junk here which can | last column, minimum width, one line span multiple lines ----------------------------------------------------------------------------------- elem | more data | other stuff | again, last column ----------------------------------------------------------------------------------- more | of | these | rows ----------------------------------------------------------------------------------- 

Solution simple:

HTML

 
element1 data junk here which can span multiple lines last column, minimum width, one line
elem more data other stuff again, last column
more of these rows

CSS

 td.shrink { white-space: nowrap; width: 1px; } 

Les colonnes dont la classe est shrink augmentent uniquement à la largeur minimale, mais les autres restnt dynamics. Cela fonctionne parce que la width de td est automatiquement développée pour s’adapter au contenu entier.

Exemple d’extrait

 table { width: 100%; } td { padding: 10px; } td.shrink { white-space: nowrap; width: 1px; } 
 
element1 data junk here which can span multiple lines last column, minimum width, one line
elem more data other stuff again, last column
more of these rows

Vous pouvez définir la largeur du correctif en plaçant la balise div dans td

 table { border: 1px solid green; border-collapse: collapse; width:100%; } table td { border: 1px solid green; } table td:nth-child(1) { width: 1%; } table td:nth-child(1) div { width: 300px; } 
 
element1 element1 element1 element1 element1 element1
data junk here last column
element2
data junk here last column
element3
data junk here last column

Si vous avez besoin de plusieurs lignes de texte dans la cellule du tableau.

N’utilisez pas d’ white-space: nowrap utilise white-space: pre; au lieu.

Dans la cellule de tableau, évitez tout format de code tel que les nouvelles lignes et indentations (espace blanc) et utilisez
pour définir une nouvelle ligne / ligne de texte. Comme ça:

 element1
second row

Démo sur CodePen