Wenn ich
habe %Vor%und
%Vor%Jede Zelle nimmt ein Viertel der Tabelle ein, und die Tabelle wird so gedehnt, dass sie in das Fenster passt.
Wie kann ich verhindern, dass sich diese Tabellenzellen an den Inhalt in den Zellen anpassen (obwohl sie immer noch den Container der Tabelle anpassen)?
Sie könnten versuchen, table-layout:fixed; - dies setzt das Layout auf eine bestimmte feste Größe (in CSS angegeben) und ignoriert den Inhalt der Zellen, so dass die Breite der Zelle nie ändert. Ich bin mir nicht sicher, ob dies das vertikale Layout beeinflusst oder nicht.
Sie könnten versuchen, eine einzelne Zelle zu wählen, um den ganzen Raum zu kauen und diese auf 100% Höhe und Breite zu setzen:
%Vor%und etwas CSS:
%Vor% Und ein Live-Beispiel . Sie müssen vorsichtig sein, um unangenehme Zeilenumbruch zu vermeiden, wenn .space-hog seine Sache macht, daher die white-space: nowrap . Wenn du .space-hog in die letzte Zeile legst, kannst du es vermeiden, die interessanten Teile nach unten zu schieben.
Sie können dies tun, indem Sie position: absolute für den Inhalt jeder Tabellenzelle verwenden: Wenn Sie das tun, beeinflusst die Größe des Inhalts nicht die Größe der Zelle.
Dazu müssen Sie dann auch die Tabellenzellen positionieren (damit die absolute Positionierung des Inhalts relativ zur Tabellenzelle ist) - und / oder, um Firefox zu unterstützen, positioniere ein extra div in den Tabellenzellen , da Firefox dich nicht auf die Zellen selbst positionieren lässt.
Zum Beispiel verwende ich diesen HTML-Code:
%Vor%Zusammen mit dem folgenden CSS, so dass die Größe des Bildes die Größe der Zelle, die es enthält, nicht beeinflusst:
%Vor% Ich setze height und width von div.bigimg auf 100% , um die Größe der td anzupassen, die es enthält, weil ich JavaScript verwende, um die Bilder zur Laufzeit anzupassen, um sie anzupassen Container, die div.bigimg sind.
Fügen Sie table-layout:fixed; dem Stil der Tabelle hinzu.
Wenn Sie bemerken, dass dies hilft, die Breite, aber nicht die Höhe zu korrigieren, liegt das daran, dass in jeder td-Zelle möglicherweise noch eine Art von Füllung vorhanden ist. Füge padding:0px; zum Styling des tds hinzu.
Sie können die Zellen auch auf einen Prozentsatz fixieren, um die Reaktionsfähigkeit zu erhalten, zB:
%Vor%Tags und Links html css html-table resize css-tables