Comment définir les largeurs de cellule du tableau au minimum sauf la dernière colonne?

J'ai une table avec une largeur de 100%. Si je mets<td> s, ils sont répartis avec des colonnes de longueur égale. Cependant, je veux que toutes les colonnes sauf la dernière aient une largeur aussi petite que possible, sans envelopper le texte.

Ce que j'ai fait en premier, c'est que j'ai mis width="1px"en tout<td> s sauf le dernier (bien que obsolète, mais cela style="width:1px"n'a eu aucun effet), ce qui a bien fonctionné jusqu'à ce que j'aie des données multi-mots dans la colonne. Dans ce cas, pour garder la longueur aussi petite que possible, il a enveloppé mon texte.

Laissez-moi vous démontrer. Imaginez cette table:

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

Peu importe ce que j'essaye, ce que je continue à obtenir, c'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 le tableau que j'ai présenté en premier. Comment y parvenir? (Je préfère m'en tenir à la norme et utiliser CSS. Honnêtement, je m'en fiche si IE n'a pas non plus implémenté une partie de la norme)

Plus d'explications: 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 du tableau atteigne réellement 100%). Si vous connaissez LaTeX, ce que je veux, c'est comment les tableaux apparaissent naturellement dans LaTeX lorsque vous définissez leur largeur à 100%.

Remarque: j'ai trouvé cela mais cela me donne toujours la même chose que la dernière table.

whitespace-wrap: nowrapn'est pas valide css. C'est ce white-space: nowrapque vous cherchez.

Cela fonctionne au moins dans Google Chrome. ( jsFiddle )

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%
}

<table>
  <tr>
    <td class="shrink">element1</td>
    <td class="shrink">data</td>
    <td class="shrink">junk here</td>
    <td class="expand">last column</td>
  </tr>
  <tr>
    <td class="shrink">elem</td>
    <td class="shrink">more data</td>
    <td class="shrink">other stuff</td>
    <td class="expand">again, last column</td>
  </tr>
  <tr>
    <td class="shrink">more</td>
    <td class="shrink">of </td>
    <td class="shrink">these</td>
    <td class="expand">rows</td>
  </tr>
</table>

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 aussi grande que possible, et vous empêcherez les précédentes de s'enrouler. 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 essentiellement une explication détaillée de son commentaire)}

J'ai eu le problème dans l'autre sens: je voulais définir une colonne de tableau à la largeur minimale possible sans la casser sur un espace blanc (dernière colonne dans l'exemple suivant) mais la largeur de l'autre doit être dynamique (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

<table>
  <tr>
    <td>element1</td>
    <td>data</td>
    <td>junk here which can span multiple lines</td>
    <td class="shrink">last column, minimum width, one line</td>
  </tr>
  <tr>
    <td>elem</td>
    <td>more data</td>
    <td>other stuff</td>
    <td class="shrink">again, last column</td>
  </tr>
  <tr>
    <td>more</td>
    <td>of</td>
    <td>these</td>
    <td class="shrink">rows</td>
  </tr>
</table>

CSS

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

Les colonnes avec classe shrinkne s'étendent qu'à la largeur minimale, mais d'autres restent dynamiques. Cela fonctionne à cause widthdetd est élargi automatiquement au contenu entier.

Exemple d'extrait

table {
  width: 100%;
}

td {
  padding: 10px;
}

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

<table>
  <tr>
    <td>element1</td>
    <td>data</td>
    <td>junk here which can span multiple lines</td>
    <td class="shrink">last column, minimum width, one line</td>
  </tr>
  <tr>
    <td>elem</td>
    <td>more data</td>
    <td>other stuff</td>
    <td class="shrink">again, last column</td>
  </tr>
  <tr>
    <td>more</td>
    <td>of</td>
    <td>these</td>
    <td class="shrink">rows</td>
  </tr>
</table>

Vous pouvez définir la largeur fixe en plaçant l' divétiquette à l'intérieurtd

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;
}

<table>
    <tr>
        <td><div>element1 element1 element1 element1 element1 element1 </div></td>
        <td>data</td>
        <td>junk here</td>
        <td>last column</td>
    </tr>
    <tr>
        <td><div>element2</div></td>
        <td>data</td>
        <td>junk here</td>
        <td>last column</td>
    </tr>
    <tr>
        <td><div>element3</div></td>
        <td>data</td>
        <td>junk here</td>
        <td>last column</td>
    </tr>
</table>

https://jsfiddle.net/8bf17o1v/

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

Ne pas white-space: nowraputiliser à la white-space: pre;place.

Dans la cellule de tableau, évitez tout format de code comme les nouvelles lignes et l'indentation (espace blanc) et utilisez <br>pour définir une nouvelle ligne / ligne de texte. Comme ça:

<td>element1<br><strong>second row</strong></td>

Démo sur CodePen

Une combinaison de deux white-space: nowrapou white-space: preavec min-width: <size>fera le travail. width: <size>en soi ne suffit pas pour empêcher la table de se serrer.