Tabellenzeile SHOW / HIDE *ohne* Spaltenbreitenanpassung, mit TableLayout: auto

Question

Ich habe eine Tabelle mit mehreren Zeilen, die Artikel zum Verkauf enthält. Wenn der Benutzer auf eine Zeile klickt, fügt ein Javascript eine neue Zeile direkt darunter ein, in der Details über den Artikel angezeigt werden. Das Problem ist, wenn die Beschreibung lang ist, zwingt es die Spaltenbreiten neu zu justieren / Größe ändern. Dies verschiebt die Spaltenpositionen und ist wirklich ärgerlich, vor allem für den Benutzer. Im Moment habe ich meine table.style.tableLayout: auto. Ich bevorzuge diesen Weg, da die Spalten an den Inhalt angepasst sind.

Meine Frage ist: Wie kann ich dynamisch "sperren" die Breiten der Spalten in meiner Tabelle, so dass, wenn ich einfügen / zeigen die neue Zeile, die Spalten nicht neu anpassen / Größe ändern?

Ich habe es versucht:

1. Dynamische Einstellung der Tabelle auf vorübergehend "tableLayout: fixed"
2. meine neue Zeile einfügen/anzeigen
3. Änderung der Tabelle zurück auf "tableLayout: auto"

Die Aktionen 1 und 2 funktionieren in FireFox, aber nicht in Safari und IE (6 und 7). Allerdings scheinen alle drei Aktionen zu verhindern, dass sich die Spalten zu sehr verschieben.

Die Frustration ist unerträglich ... ich verliere viel Schlaf ... bitte helfen Sie!

Danke.

Answer 1

Für diejenigen, die nach dem Code suchen (dieser wird in jQuery erstellt). Dies setzt auch voraus, dass die erste Zeile die richtigen Breiten für jede Zelle hat. Ziemlich einfach Änderungen, wenn erforderlich.

$('table.class_of_table_to_fix tr:first td').each(function() {
   $(this).css({'width': $(this).width()+"px"});
});

Answer 2

Ich würde für jede Spalte eine prozentuale Breite festlegen, die als Richtwert dient. Legen Sie sie nur einmal für die TH jeder Spalte fest. Der Browser wird immer noch die Spalten an den Inhalt anpassen, wenn nötig, aber die Spalten bleiben konsistenter an ihrem Platz.

Als Nächstes würde ich niemals css "white-space:nowrap" irgendwo in diese Tabelle setzen. Eine lange Beschreibung sollte das Tabellenlayout nicht unterbrechen, sie sollte sich über mehrere Zeilen erstrecken und lesbar sein, wenn Sie die Breite der einzelnen Spalten entsprechend der Art der Daten einstellen. In ähnlicher Weise würde ich die Verwendung von (nicht umbrechbaren) Leerzeichen auf Daten, Zeiten und Zahlen beschränken und den Text umbrechen lassen.

Abgesehen davon mache ich das bei meiner Arbeit regelmäßig, und es gibt einen Zeitpunkt, an dem man aufhören muss, den Browser zu etwas aufzufordern, wofür er nicht gedacht ist. Der Inhalt sollte fließen und sich anpassen. Das Festlegen von Spaltenbreiten auf Pixel ist in 99,99999 % der Fälle eine schlechte Idee.

PS: Wenn Sie wirklich, wirklich, wirklich brauchen, um Spalten zu sperren, die einzige Lösung, die ich kenne, die mit CSS2 und accross alle Browser funktioniert, ist die Verwendung von Bildern. Sie könnten ein 1px hohes, transparentes Gif-Bild in jede Spalte einfügen und in der Auffüllung der Zellen (TD) eine Pixelbreite für jedes Bild (IMG) statt für die Spalten (TH/TD) festlegen. Sie könnten die Bilder zum Beispiel in der TH ausblenden. Sie können die Bilder auf 1 Pixel Breite belassen und prozentuale Breiten auf TDs setzen, und wenn Sie eine neue Zeile öffnen, würden Sie jede Spaltenbreite minus TD Padding erhalten und das auf das entsprechende IMG setzen. Ich habe es nicht ausprobiert! 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.

Answer 3

Ich hatte ein ähnliches Problem, als ich eine Tabelle mit Gruppen implementierte, die umgeschaltet werden konnten. Ich wollte, dass das anfängliche Verhältnis zwischen den Spalten gleich bleibt, ohne dass die Breite der Spalten festgelegt wird. Standardmäßig würde der Browser die Breiten in Abhängigkeit von der Sichtbarkeit der Tabellenzeilen ändern, was unerwünscht war.

Ich bin dem Vorschlag von @faB gefolgt und habe ein kleines Skript verwendet, das die Prozentsätze der Elemente berechnet und sie nach dem ersten Rendering anwendet. Dies machte meine Spalten bleiben die gleiche Breite, auch mit allen Zeilen ausgeblendet.

Hier ist das Skript, das jQuery verwendet:

(function($){

    var lock_widths = function() {
        var total_width = $('table').innerWidth();
        var headers = $('table th');
        var leftover = 100;

        $.each(headers, function(ix, el) {
            var header = $(el), width;

            // on the last call use the leftover percentage
            if (ix == headers.length - 1) {
                width = leftover;
            } else {
                leftover -= width = header.outerWidth() / total_width * 100; 
            }

            header.css({'width': width + '%'});
        });
    };

    $(document).ready(lock_widths);

})(jQuery);

Getestet in IE7+, Firefox und Chrome. Dies funktioniert für meinen speziellen Fall, weil ich Kopfspalten als Referenz habe, aber es könnte umgeschrieben werden, um einige andere Spalten zu messen.

Answer 4

Sie können die Details der Zeile unter der angeklickten Zeile in DIV anzeigen und deren

style="overflow:auto";

so dass die Details umbrochen werden und die Bildlaufleiste verfügbar ist, um den gesamten Text anzuzeigen.

Answer 5

Ich weiß nicht, ob Sie mit Jquery vertraut sind, aber das ist, was ich verwenden würde - in Kombination mit einer separaten Klasse für die Spalte, die die Größenänderung in der neuen Zeile verursacht - zu:

1. Berechne / ermittle das With der Spalte
2. Setzen Sie die mit der oben genannten Klasse
3. Hinzufügen der Zeile

Ich habe es noch nicht ausprobiert, aber das sollte genügen.

Übrigens, es gibt wahrscheinlich andere Möglichkeiten, es zu tun, ich bin nur mehr vertraut mit jquery (für Punkt 1. und 2.).