Passen Sie die Zellenbreite an den Inhalt an

Wie kann ich angesichts des folgenden Markups mithilfe von CSS eine Zelle (alle Zellen in der Spalte) zwingen, sich an die Breite des Inhalts anzupassen, anstatt sie zu dehnen (was das Standardverhalten ist)?

<style type="text/css">
td.block
{
border: 1px solid black;
}
</style>
<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>

EDIT: Mir ist klar, dass ich die Breite hart codieren könnte, aber ich würde das lieber nicht tun, da der Inhalt in dieser Spalte dynamisch ist.

Wenn Sie sich das Bild unten ansehen, ist das erste Bild das, was das Markup erzeugt. Das zweite Bild ist was ich will.

Ich bin mir nicht sicher, ob ich Ihre Frage verstehe, aber ich werde es versuchen. JSfiddle des Beispiels .

HTML:

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

CSS:

td{
    border:1px solid #000;
}

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

Rahmen

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

wird Ihr Problem lösen.

Für mich ist dies die beste automatische Anpassung und automatische Größenänderung für Tabellen und ihre Spalten (verwenden Sie CSS! Wichtig ... 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 Tabellen oder Tabellenspalten an. Wenn der Tabelleninhalt größer ist, wird die Bildschirmgröße auf überschritten.

Das Festlegen der CSS-Breite auf 1% oder 100% eines Elements gemäß allen Spezifikationen, die ich herausfinden konnte, hängt mit dem übergeordneten Element zusammen. Obwohl Blink Rendering Engine (Chrome) und Gecko (Firefox) zum Zeitpunkt des Schreibens diese 1% oder 100% (eine Spalte verkleinern oder eine Spalte, um den verfügbaren Platz zu füllen) gut zu handhaben scheinen, ist dies nicht gemäß allen CSS-Spezifikationen garantiert Ich konnte es richtig rendern.

Eine Möglichkeit besteht darin, die Tabelle durch CSS4-Flex-Divs zu ersetzen:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Das funktioniert in neuen Browsern, dh IE11 +, siehe Tabelle am Ende des Artikels.

Es gibt viele Möglichkeiten, dies zu tun!

Korrigieren Sie mich, wenn ich falsch liege, aber die Frage sucht nach einem solchen Ergebnis.

<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" die verbleibende Seite (HINWEIS: Wenn Sie mehr Text zu einem der 50% -Felder hinzufügen, wird mehr Platz benötigt), und das letzte Feld dominiert ständig die Tabelle.

Wenn Sie sind glücklich Textumbruch lassen können Sie bewegen white-space: nowrap; Der 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. width: 150px und belasse den Prozentsatz in den ersten beiden Feldern.

Hoffe das hilft!

Einfach:

    <div style='overflow-x:scroll;overflow-y:scroll;width:100%;height:100%'>