Wie setze ich die Tabellenzellenbreiten mit Ausnahme der letzten Spalte auf Minimum?

Ich habe einen Tisch mit 100% Breite. Wenn ich <td>s hineinlege, werden sie mit gleich langen Spalten verteilt. Ich möchte jedoch, dass alle Spalten außer der letzten so klein wie möglich sind, ohne dass Text umbrochen wird.

Was ich zuerst getan habe, war, dass ich width="1px"alle <td>s außer zuletzt eingestellt habe (obwohl veraltet, aber das style="width:1px"hatte keine Auswirkung), was gut funktionierte, bis ich Mehrwortdaten in der Spalte hatte. In diesem Fall wurde mein Text umbrochen, um die Länge so klein wie möglich zu halten.

Lassen Sie mich demonstrieren. Stellen Sie sich diese Tabelle vor:

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

Egal was ich versuche, was ich immer wieder bekomme, ist Folgendes:

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

oder (obwohl ich eingestellt habe style="whitespace-wrap:nowrap") dies:

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

Ich möchte den Tisch bekommen, den ich zuerst vorgestellt habe. Wie erreiche ich das? (Ich bleibe lieber beim Standard und verwende CSS. Es ist mir ehrlich gesagt egal, ob der IE auch keinen Teil des Standards implementiert hat.)

Weitere Erklärung: Ich muss die Spalten so kurz wie möglich halten, ohne Wörter zu umbrechen (die letzte Spalte sollte so groß sein, dass die Tabellenbreite tatsächlich 100% erreicht). Wenn Sie LaTeX kennen, möchte ich, wie Tabellen in LaTeX natürlich angezeigt werden, wenn Sie ihre Breite auf 100% einstellen.

Hinweis: Ich habe dies gefunden, aber es gibt mir immer noch das gleiche wie in der letzten Tabelle.

whitespace-wrap: nowrapist nicht gültig CSS. Es ist das, white-space: nowrapwonach du suchst.

Dies funktioniert zumindest 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%;
}

Wenn Sie den obigen Code verwenden, versucht die letzte Tabellenzelle, so groß wie möglich zu sein, und Sie verhindern, dass die vorherigen Zellen umbrochen werden. Dies entspricht den anderen Antworten, ist jedoch wesentlich effizienter.

Etwas anderes Thema, aber vielleicht hilft es jemandem, der wie ich über diese Frage stolpert.
_{(Ich habe gerade den Kommentar von Campbeln gesehen, der genau dies vorschlägt, nachdem er meine Antwort unten geschrieben hat. Dies ist also im Grunde eine detaillierte Erklärung seines Kommentars.)}

Ich hatte das Problem umgekehrt: Ich wollte eine Tabellenspalte auf die minimal mögliche Breite einstellen, ohne sie im Leerraum zu unterbrechen (letzte Spalte im folgenden Beispiel), aber die Breite der anderen sollte dynamisch sein (einschließlich Zeilenumbrüche):

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

Einfache Lösung:

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

Spalten mit Klasse werden shrinknur auf die Mindestbreite erweitert, andere bleiben jedoch dynamisch. Dies funktioniert , weil widthdietd automatisch angepasst ganzen Inhalt erweitert.

Beispiel-Snippet

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>

Sie können die feste Breite festlegen, indem Sie das divTag darin platzierentd

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/

Wenn Sie mehrere Textzeilen in der Tabellenzelle benötigen.

Nicht white-space: nowrapverwendenwhite-space: pre; stattdessen .

Vermeiden Sie in Tabellenzellen Codeformate wie neue Zeilen und Einrückungen (Leerzeichen) und verwenden Sie diese <br>, um eine neue Textzeile / Zeile festzulegen . So was:

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

Demo auf CodePen

Eine Kombination von entweder white-space: nowrapoder white-space: premit min-width: <size>erledigt den Job. width: <size>allein reicht nicht aus, um den Tisch vor dem Zusammendrücken zu bewahren.