Zellenbreite an den Inhalt anpassen

Question

Angesichts der folgenden Markup, wie könnte ich CSS verwenden, um eine Zelle (alle Zellen in der Spalte) zu erzwingen, um die Breite des Inhalts in ihr statt Stretch (was das Standardverhalten ist) passen?

td.block {
  border: 1px solid black;
}

<table style="width: 100%;">
  <tr>
    <td class="block">this should stretch</td>
    <td class="block">this should stretch</td>
    <td class="block">this should be the content width</td>
  </tr>
</table>

Ich weiß, dass ich die Breite hart kodieren könnte, aber das würde ich lieber nicht tun, da der Inhalt, der in dieser Spalte erscheinen wird, dynamisch ist.

In der folgenden Abbildung ist das erste Bild das, was das Markup erzeugt. Das zweite Bild ist das, was ich will.

Answer 1

Ich bin mir nicht sicher, ob ich Ihre Frage verstehe, aber ich werde es versuchen:

td {
    border: 1px solid #000;
}

tr td:last-child {
    width: 1%;
    white-space: nowrap;
}

<table style="width: 100%;">
    <tr>
        <td class="block">this should stretch</td>
        <td class="block">this should stretch</td>
        <td class="block">this should be the content width</td>
    </tr>
</table>

Answer 2

Einstellung

max-width:100%;
white-space:nowrap;

wird Ihr Problem lösen.

Answer 3

Für mich ist dies die beste autofit und autoresize für die Tabelle und ihre Spalten (verwenden Sie css !important ... nur, wenn Sie nicht ohne können)

.myclass table {
    table-layout: auto !important;
}

.myclass th, .myclass td, .myclass thead th, .myclass tbody td, .myclass tfoot td, .myclass tfoot th {
    width: auto !important;
}

Geben Sie keine CSS-Breite für die Tabelle oder für die Tabellenspalten an. Wenn der Tabelleninhalt größer ist, wird er über die Bildschirmgröße hinausgehen.

Answer 4

Es gibt viele Möglichkeiten, dies zu tun!

Korrigieren Sie mich, wenn ich falsch liege, aber die Frage zielt auf diese Art von Ergebnis ab.

<table style="white-space:nowrap;width:100%;">
  <tr>
    <td class="block" style="width:50%">this should stretch</td>
    <td class="block" style="width:50%">this should stretch</td>
    <td class="block" style="width:auto">this should be the content width</td>
  </tr>
</table>

Die ersten beiden Felder "teilen" sich die verbleibende Seite (HINWEIS: Wenn Sie in eines der beiden 50%-Felder mehr Text einfügen, nimmt es mehr Platz ein), und das letzte Feld wird die Tabelle ständig dominieren.

Wenn Sie den Textumbruch zulassen möchten, können Sie umziehen white-space:nowrap; zum Stil des 3. Feldes
ist die einzige Möglichkeit, eine neue Zeile in diesem Feld zu beginnen.

Alternativ können Sie eine Länge für das letzte Feld festlegen, z. B. width:150px, und die Prozentwerte für die ersten beiden Felder beibehalten.

Ich hoffe, das hilft!

Answer 5

Erstens: Einstellung

td {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

stellt sicher, dass die Zellen der Tabelle gedehnt werden.

Jetzt brauchen Sie nur noch

td.fit {
  width: 0;
  min-width: fit-content;
}

auf Ihre passenden Zellen.

Beachten Sie, dass die Tabelle nur dann in der Breite überläuft, wenn der Inhalt aller passenden Zellen zu groß ist, um in eine Tabellen-Breite von 100% .

table {
  white-space: nowrap;
  width: 100%;
}

td {
  border: 1px solid black;
}

td {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

td.fit {
  width: 0;
  min-width: fit-content;
}

<table>
  <tr>
    <td class="stretch">this should stretch</td>
    <td class="stretch">this should stretch</td>
    <td class="fit">this should be the content width</td>
  </tr>
</table>