Ich habe eine Tabelle mit mehreren Zeilen und zeige Artikel zum Verkauf an. Wenn der Benutzer auf einer Zeile klickt, ein Javascript-Einsätze / zeigt eine neue Zeile direkt darunter mit Details über das Produkt. Das Problem ist, wenn die Beschreibung lang ist, ist es die Spaltenbreiten zwingt nachzustellen / Größe ändern. Dies verschiebt die Spaltenpositionen und ist wirklich ärgerlich, besonders für den Benutzer. Im Moment habe ich meine table.style.tableLayout: auto. Ich ziehe es tatsächlich auf diese Weise, weil die Spalten auf den Inhalt angepasst werden.
Meine Frage ist: Wie kann ich „sperren“ die Breite der Spalten in meiner Tabelle dynamisch, so dass, wenn ich einfügen / die neue Zeile zeigen die Spalten nachstellen nicht / Größe ändern
Ich habe es versucht:
Aktionen 1 & amp; 2 Werke in in FireFox, aber nicht in Safari und IE (6 & amp; 7). Alle drei scheinen jedoch zu verhindern, dass sich die Spalten zu sehr verschieben.
Die Frustration ist unerträglich ... viel Schlaf zu verlieren ... bitte helfen Sie!
Danke.
Ich würde eine prozentuale Breite für jede Spalte einfach als Richtlinie festlegen. Setzen Sie es nur einmal auf den TH jeder Spalte. Der Browser passt die Spalten bei Bedarf immer noch an den Inhalt an, aber die Spalten bleiben konsistenter.
Als nächstes würde ich niemals css "white-space: nowrap" irgendwo auf diesem Tisch platzieren. Eine lange Beschreibung sollte das Tabellenlayout nicht unterbrechen, es sollte in mehreren Zeilen korrekt umbrochen werden und lesbar sein, wenn Sie die Breite für jede Spalte dem Datentyp anpassen. Ähnlich würde ich die Verwendung von (nicht brechbaren Leerzeichen) zu Daten, Zeiten und Zahlen beibehalten und den Text umbrechen lassen.
Ansonsten tue ich das in meinem Job auf Dialysebasis, und es gibt eine Zeit, in der du aufhören musst Haare zu machen, die den Browser bitten, etwas zu tun, für das es nicht vorgesehen ist. Der Inhalt sollte fließen und sich anpassen. Sperren von Spaltenbreiten zu Pixeln ist 99,99999% der Zeit eine schlechte Idee.
PS: Wenn Sie wirklich wirklich Spalten sperren müssen, ist die einzige Lösung, die mir bekannt ist, die mit CSS2 und allen Browsern funktioniert, die Verwendung von Bildern. Sie könnten in jeder Spalte ein hochtransparentes 1-Pixel-GIF-Bild einfügen und im Padding der Zellen (TD) zählen und eine Pixelbreite für jedes Bild (IMG) anstatt für die Spalten (TH / TD) festlegen. Sie könnten diese zum Beispiel im TH verstecken. Sie können die Bilder auf 1 Pixel Breite belassen und Prozentbreiten auf TDs setzen, und wenn Sie eine neue Zeile öffnen, erhalten Sie jede Spaltenbreite minus TD Padding und setzen diese auf den entsprechenden IMG. Ich habe es nicht versucht! Ich weiß nur, dass ich in vielen Projekten, an denen ich gearbeitet habe, kleine GIF-Bilder verwendet habe, um zum Beispiel einen minimalen vertikalen Abstand zwischen den Spalten festzulegen.
Ich hatte ein ähnliches Problem, als ich eine Tabelle mit Gruppen implementierte, die umgeschaltet werden konnten. Ich wollte, dass das ursprüngliche Verhältnis zwischen den Säulen gleich bleibt, ohne die Breite der Säulen festzulegen. Standardmäßig würde der Browser die Breite abhängig von der Sichtbarkeit der Zeilen der Tabelle ändern, was unerwünscht ist.
Ich ging weiter und befolgte den Vorschlag von @faB, Prozentsätze anzuwenden, tat dies jedoch mit einem kleinen Skript, das die Prozentsätze der th Elemente berechnete und sie nach dem anfänglichen Rendern anwendete. Das hat dazu geführt, dass meine Spalten die gleiche Breite behalten, auch wenn alle Zeilen ausgeblendet sind.
Hier ist das Skript, das jQuery verwendet:
%Vor%Getestet in IE7 +, Firefox und Chrome. Dies funktioniert für meinen speziellen Fall, weil ich Header-Spalten als Referenz habe, aber es könnte neu geschrieben werden, um einige andere Spalten zu messen.
Sie können die Details der Zeile unter dem angeklickten in DIV anzeigen und das
festlegen %Vor%, damit die Details umbrochen werden und die Bildlaufleiste verfügbar ist, um den gesamten Text anzuzeigen.
Ich weiß nicht, ob Sie mit jQuery vertraut sind, aber das würde ich verwenden - in Kombination mit einer separaten Klasse für die Spalte, die die Größenänderung in der neuen Zeile bewirkt - zu:
Ich habe es nicht versucht, aber das sollte es tun.
Übrigens gibt es wahrscheinlich andere Möglichkeiten, es zu tun, ich bin nur besser vertraut mit jQuery (für Punkt 1. und 2.).
Tags und Links javascript css html-table width