Come imposto le larghezze delle celle della tabella al minimo eccetto l'ultima colonna?

Ho un tavolo con il 100% di larghezza. Se ci metto <td>dentro, vengono distribuiti con colonne di uguale lunghezza. Tuttavia, voglio che tutte le colonne tranne l'ultima abbiano una larghezza più piccola possibile, senza avvolgere il testo.

La prima cosa che ho fatto è stato impostare width="1px"tutti i <td>s tranne l'ultimo (sebbene deprecato, ma style="width:1px"non ha avuto alcun effetto), che ha funzionato bene fino a quando non ho avuto dati a più parole nella colonna. In quel caso, per mantenere la lunghezza più piccola possibile, ha avvolto il mio testo.

Fammi dimostrare. Immagina questa tabella:

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

Non importa cosa provo, quello che continuo a ottenere è questo:

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

o (anche se ho impostato style="whitespace-wrap:nowrap") questo:

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

Voglio prendere il tavolo che ho presentato per primo. Come ottengo questo? (Preferisco attenermi allo standard e utilizzare i CSS. Onestamente non mi interessa se IE non ha implementato parte dello standard)

Ulteriori spiegazioni: ciò di cui ho bisogno è mantenere le colonne il più corte possibile senza avvolgere le parole (l'ultima colonna dovrebbe essere grande quanto necessario per far sì che la larghezza della tabella raggiunga effettivamente il 100%). Se conosci LaTeX, quello che voglio è come le tabelle appaiono naturalmente in LaTeX quando imposti la loro larghezza al 100%.

Nota: ho trovato questo ma mi dà ancora lo stesso dell'ultima tabella.

whitespace-wrap: nowrapnon è css valido. E ' white-space: nowrapche stai cercando.

Funziona almeno in 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%;
}

Usando il codice sopra, l'ultima cella della tabella cercherà di essere il più grande possibile e impedirai a quelle precedenti di avvolgersi. Questo fa lo stesso delle altre risposte fornite, ma molto più efficiente.

Argomento leggermente diverso ma forse aiuta qualcuno che inciampa su questa domanda come me.
_{(Ho appena visto il commento di Campbeln che suggerisce esattamente questo dopo aver scritto la mia risposta di seguito, quindi questa è fondamentalmente una spiegazione dettagliata del suo commento)}

Ho avuto il problema al contrario: volevo impostare una colonna della tabella sulla larghezza minima possibile senza romperla su uno spazio bianco (ultima colonna nell'esempio seguente) ma la larghezza dell'altra dovrebbe essere dinamica (comprese le interruzioni di riga):

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

Soluzione semplice:

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

Le colonne con la classe shrinksi espandono solo fino alla larghezza minima, ma le altre rimangono dinamiche. Questo funziona perché widthdi tdviene automaticamente espanso per adattarsi contenuti intero.

Snippet di esempio

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>

È possibile impostare la larghezza della correzione inserendo il divtag all'internotd

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/

Se hai bisogno di più righe di testo nella cella della tabella.

Non white-space: nowrapusare white-space: pre;invece l' uso .

Nella cella della tabella evitare qualsiasi formato di codice come nuove righe e rientri (spazio bianco) e utilizzare <br>per impostare una nuova riga / riga di testo. Come questo:

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

Demo su CodePen

Una combinazione di entrambi white-space: nowrapo white-space: precon min-width: <size>farà il lavoro. width: <size>di per sé non basta a trattenere il tavolo dallo spremere.