Passen Sie die Zellenbreite an den Inhalt an

264

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.

Geben Sie hier die Bildbeschreibung ein

html css html-table

— Mansfield
quelle

Ich verstehe deine Frage nicht. Möchten Sie die letzte Spalte auf eine bestimmte Breite beschränken?

— MetalFrog

8

@diEcho Ich fand es ziemlich klar. Ich werde ein oder zwei Bilder hinzufügen.

— Mansfield

Mögliches Duplikat der automatischen

— Breite

449

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

— MetalFrog
quelle

3

warum schreibst du <table style="width:100%">statt<table width="100%" >

— diEcho

17

@diEcho Ich habe diesen Teil nicht geschrieben, das war aus dem Beispielcode. Unabhängig davon empfiehlt es sich, das width-Attribut für Elemente zu verwenden. In diesem kurzen Beispiel ist das Inline-CSS in Ordnung, sollte jedoch in eine Datei abstrahiert werden, wenn es sich um Code auf Produktionsebene handelt.

— MetalFrog

45

Eine sauberere Möglichkeit, dies zu tun, besteht darin, einen Stil namens "Nostretch" (oder so ähnlich) zu definieren und dann Nostretch im CSS so zu definieren, dass die Breite 1% und der Nowrap beträgt. Dann hätte der letzte TD 'class = "nostretch block"'. Auf diese Weise können Sie jede gewünschte Zelle "nostretchen".

— Tim Holt

3

Dies ist eine gute Lösung, aber leider werden meine Schaltflächengruppen in Bootstrap 3 wie folgt umbrochen: jsfiddle.net/wexdX/326 Irgendwelche Ideen, wie ich sie unterdrücken kann?

— Martin Braun

5

Dies funktioniert nur, wenn der Inhalt breiter als die Breite ist: 1% - richtig? Denn wenn der Inhalt kleiner als die Breite ist: 1%, wird die Zelle größer.

— Adam

44

Rahmen

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

wird Ihr Problem lösen.

— Shubham Nigam
quelle

8

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.

— myset
quelle

3

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.

— Mladen Adamovic
quelle

1

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!

— Christian Newman
quelle

-1

Einfach:

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

— Parth Jani
quelle