Fluid und Fixed Columns Table
Ich habe eine Tabelle auf meinem Layout, die 5 Spalten hat, 3 von ihnen sollten in px feste Breite sein und die anderen 2 sollten flüssig sein.
Es klang zunächst einfach, aber das Problem ist, dass sich die beiden Flüssigkeitssäulen anders verhalten sollten.
Die letzte Spalte sollte so weit wie möglich gedehnt werden, damit sie zu ihrem Inhalt passt, also werden sie nie versteckt, sollten aber niemals leeren Raum hinterlassen. Und die mittlere Spalte sollte den ganzen freien Platz einnehmen, den sie finden kann, aber auch Überlauf zu versteckt, falls der letzte größer werden sollte.
Ich habe versucht, das mit CSS zu machen, aber ich konnte es nicht schaffen ... Gibt es eine Möglichkeit, dies mit reinem CSS zu tun oder ich brauche js?
BEARBEITEN
Das habe ich bis jetzt erreicht:
HTML
%Vor%CSS
%Vor%Es funktioniert fast wie erwartet. Außer für die letzte Spalte.
4 Antworten
Vielleicht kann ich helfen, vielleicht nicht.
Zuerst würde ich divs anstelle von tr / td verwenden. Ich habe ehrlich gesagt keine Notwendigkeit, Tabellen zu verwenden, seit CSS eingeführt wurde, und ich bin ziemlich überrascht, dass manche Leute das immer noch tun. Aber es könnte einen Grund geben, also bitte nimm das nicht als Kritik.
Wenn Sie divs verwenden, bearbeiten Sie diesen Abschnitt Ihres Codes:
%Vor%Das wird sicherstellen, dass das Div mindestens 210 Pixel breit ist, egal was passiert. Es sollte funktionieren. Übrigens, wenn dies die einzige Tabelle auf der Seite ist und div oder td in dem Sinne einzigartig ist, dass es eine minimale Höhe hat, dann möchten Sie vielleicht eine ID anstelle einer Klasse verwenden. Das macht Ihren Code sauberer und eleganter. Hoffe, das hilft.
Wenn Sie das Umbrechen nicht benötigen, tun Sie Folgendes:
%Vor%Wenn Umbruch gewünscht ist, müssen Sie die Breite der Tabelle in auto ändern und den Parameter min-width hinzufügen.
%Vor%Änderungen an der CSS-Datei vorgenommen
* DEMO - Ссылка
%Vor%