Jak ustawić minimalne szerokości komórek tabeli z wyjątkiem ostatniej kolumny?

Mam stół o 100% szerokości. Jeśli wstawię do niego <td>s, zostaną one rozłożone na równej długości kolumny. Jednak chcę, aby wszystkie kolumny z wyjątkiem ostatniej miały jak najmniejszą szerokość, bez zawijania tekstu.

Najpierw ustawiłem width="1px"wszystkie <td>s z wyjątkiem ostatniego (chociaż przestarzałe, ale style="width:1px"nie miało żadnego efektu), co działało dobrze, dopóki nie miałem danych wielowyrazowych w kolumnie. W takim przypadku, aby zachować jak najmniejszą długość, zawijał mój tekst.

Pokażę. Wyobraź sobie ten stół:

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

Bez względu na to, co próbuję, wciąż otrzymuję to:

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

lub (mimo że ustawiłem style="whitespace-wrap:nowrap") to:

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

Chcę dostać tabelę, którą przedstawiłem jako pierwszy. Jak to osiągnąć? (Wolałbym trzymać się standardu i używać CSS. Szczerze mówiąc, nie obchodzi mnie, czy IE również nie zaimplementował części standardu)

Więcej wyjaśnień: Potrzebuję, aby kolumny były jak najkrótsze bez zawijania słów (ostatnia kolumna powinna być tak duża, jak to konieczne, aby szerokość tabeli faktycznie osiągnęła 100%). Jeśli znasz LaTeX, chciałbym, aby tabele wyglądały naturalnie w LaTeX, gdy ustawisz ich szerokość na 100%.

Uwaga: znalazłem to, ale nadal daje mi to samo, co ostatnia tabela.

whitespace-wrap: nowrapnie jest prawidłowym css. To white-space: nowrap, czego szukasz.

Działa to przynajmniej w 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%;
}

Używając powyższego kodu, ostatnia komórka tabeli będzie starała się być tak duża, jak to tylko możliwe, a Ty zapobiegniesz zawijaniu się komórek poprzedzających. Robi to samo, co inne udzielone odpowiedzi, ale jest o wiele bardziej wydajne.

Trochę inny temat, ale może pomoże komuś, kto tak jak ja natknie się na to pytanie.
_{(Właśnie zobaczyłem komentarz Campbelna, który dokładnie to sugeruje po napisaniu mojej odpowiedzi poniżej, więc jest to w zasadzie szczegółowe wyjaśnienie jego komentarza)}

Miałem problem na odwrót: chciałem ustawić jedną kolumnę tabeli na minimalną możliwą szerokość bez dzielenia jej na białe znaki (ostatnia kolumna w poniższym przykładzie), ale szerokość drugiej powinna być dynamiczna (łącznie z podziałami linii):

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

Proste rozwiązanie:

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

Kolumny z klasą shrinkrozszerzają się tylko do minimalnej szerokości, ale inne pozostają dynamiczne. To działa, ponieważ widthz tdautomatycznie rozszerzony, aby dopasować całą zawartość.

Przykładowy fragment

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>

Możesz ustawić stałą szerokość, umieszczając divtag wewnątrztd

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/

Jeśli potrzebujesz wielu wierszy tekstu w komórce tabeli.

Nie white-space: nowrapużywaj white-space: pre;zamiast tego.

W komórce tabeli unikaj wszelkich formatów kodu, takich jak nowe linie i wcięcia (spacje) i użyj, <br>aby ustawić nową linię / wiersz tekstu. Lubię to:

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

Demo na CodePen

Kombinacja albo white-space: nowrapalbo white-space: preze min-width: <size>będzie wykonać zadanie. width: <size>samo w sobie nie wystarczy, aby utrzymać stół przed ściśnięciem.